<!DOCTYPE html>

<html lang="en">
<head><meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Untitled6</title><script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
<style type="text/css">
    pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: var(--jp-cell-editor-active-background) }
.highlight { background: var(--jp-cell-editor-background); color: var(--jp-mirror-editor-variable-color) }
.highlight .c { color: var(--jp-mirror-editor-comment-color); font-style: italic } /* Comment */
.highlight .err { color: var(--jp-mirror-editor-error-color) } /* Error */
.highlight .k { color: var(--jp-mirror-editor-keyword-color); font-weight: bold } /* Keyword */
.highlight .o { color: var(--jp-mirror-editor-operator-color); font-weight: bold } /* Operator */
.highlight .p { color: var(--jp-mirror-editor-punctuation-color) } /* Punctuation */
.highlight .ch { color: var(--jp-mirror-editor-comment-color); font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: var(--jp-mirror-editor-comment-color); font-style: italic } /* Comment.Multiline */
.highlight .cp { color: var(--jp-mirror-editor-comment-color); font-style: italic } /* Comment.Preproc */
.highlight .cpf { color: var(--jp-mirror-editor-comment-color); font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: var(--jp-mirror-editor-comment-color); font-style: italic } /* Comment.Single */
.highlight .cs { color: var(--jp-mirror-editor-comment-color); font-style: italic } /* Comment.Special */
.highlight .kc { color: var(--jp-mirror-editor-keyword-color); font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: var(--jp-mirror-editor-keyword-color); font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: var(--jp-mirror-editor-keyword-color); font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: var(--jp-mirror-editor-keyword-color); font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { color: var(--jp-mirror-editor-keyword-color); font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: var(--jp-mirror-editor-keyword-color); font-weight: bold } /* Keyword.Type */
.highlight .m { color: var(--jp-mirror-editor-number-color) } /* Literal.Number */
.highlight .s { color: var(--jp-mirror-editor-string-color) } /* Literal.String */
.highlight .ow { color: var(--jp-mirror-editor-operator-color); font-weight: bold } /* Operator.Word */
.highlight .pm { color: var(--jp-mirror-editor-punctuation-color) } /* Punctuation.Marker */
.highlight .w { color: var(--jp-mirror-editor-variable-color) } /* Text.Whitespace */
.highlight .mb { color: var(--jp-mirror-editor-number-color) } /* Literal.Number.Bin */
.highlight .mf { color: var(--jp-mirror-editor-number-color) } /* Literal.Number.Float */
.highlight .mh { color: var(--jp-mirror-editor-number-color) } /* Literal.Number.Hex */
.highlight .mi { color: var(--jp-mirror-editor-number-color) } /* Literal.Number.Integer */
.highlight .mo { color: var(--jp-mirror-editor-number-color) } /* Literal.Number.Oct */
.highlight .sa { color: var(--jp-mirror-editor-string-color) } /* Literal.String.Affix */
.highlight .sb { color: var(--jp-mirror-editor-string-color) } /* Literal.String.Backtick */
.highlight .sc { color: var(--jp-mirror-editor-string-color) } /* Literal.String.Char */
.highlight .dl { color: var(--jp-mirror-editor-string-color) } /* Literal.String.Delimiter */
.highlight .sd { color: var(--jp-mirror-editor-string-color) } /* Literal.String.Doc */
.highlight .s2 { color: var(--jp-mirror-editor-string-color) } /* Literal.String.Double */
.highlight .se { color: var(--jp-mirror-editor-string-color) } /* Literal.String.Escape */
.highlight .sh { color: var(--jp-mirror-editor-string-color) } /* Literal.String.Heredoc */
.highlight .si { color: var(--jp-mirror-editor-string-color) } /* Literal.String.Interpol */
.highlight .sx { color: var(--jp-mirror-editor-string-color) } /* Literal.String.Other */
.highlight .sr { color: var(--jp-mirror-editor-string-color) } /* Literal.String.Regex */
.highlight .s1 { color: var(--jp-mirror-editor-string-color) } /* Literal.String.Single */
.highlight .ss { color: var(--jp-mirror-editor-string-color) } /* Literal.String.Symbol */
.highlight .il { color: var(--jp-mirror-editor-number-color) } /* Literal.Number.Integer.Long */
  </style>
<style type="text/css">
/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*
 * Mozilla scrollbar styling
 */

/* use standard opaque scrollbars for most nodes */
[data-jp-theme-scrollbars='true'] {
  scrollbar-color: rgb(var(--jp-scrollbar-thumb-color))
    var(--jp-scrollbar-background-color);
}

/* for code nodes, use a transparent style of scrollbar. These selectors
 * will match lower in the tree, and so will override the above */
[data-jp-theme-scrollbars='true'] .CodeMirror-hscrollbar,
[data-jp-theme-scrollbars='true'] .CodeMirror-vscrollbar {
  scrollbar-color: rgba(var(--jp-scrollbar-thumb-color), 0.5) transparent;
}

/* tiny scrollbar */

.jp-scrollbar-tiny {
  scrollbar-color: rgba(var(--jp-scrollbar-thumb-color), 0.5) transparent;
  scrollbar-width: thin;
}

/* tiny scrollbar */

.jp-scrollbar-tiny::-webkit-scrollbar,
.jp-scrollbar-tiny::-webkit-scrollbar-corner {
  background-color: transparent;
  height: 4px;
  width: 4px;
}

.jp-scrollbar-tiny::-webkit-scrollbar-thumb {
  background: rgba(var(--jp-scrollbar-thumb-color), 0.5);
}

.jp-scrollbar-tiny::-webkit-scrollbar-track:horizontal {
  border-left: 0 solid transparent;
  border-right: 0 solid transparent;
}

.jp-scrollbar-tiny::-webkit-scrollbar-track:vertical {
  border-top: 0 solid transparent;
  border-bottom: 0 solid transparent;
}

/*
 * Lumino
 */

.lm-ScrollBar[data-orientation='horizontal'] {
  min-height: 16px;
  max-height: 16px;
  min-width: 45px;
  border-top: 1px solid #a0a0a0;
}

.lm-ScrollBar[data-orientation='vertical'] {
  min-width: 16px;
  max-width: 16px;
  min-height: 45px;
  border-left: 1px solid #a0a0a0;
}

.lm-ScrollBar-button {
  background-color: #f0f0f0;
  background-position: center center;
  min-height: 15px;
  max-height: 15px;
  min-width: 15px;
  max-width: 15px;
}

.lm-ScrollBar-button:hover {
  background-color: #dadada;
}

.lm-ScrollBar-button.lm-mod-active {
  background-color: #cdcdcd;
}

.lm-ScrollBar-track {
  background: #f0f0f0;
}

.lm-ScrollBar-thumb {
  background: #cdcdcd;
}

.lm-ScrollBar-thumb:hover {
  background: #bababa;
}

.lm-ScrollBar-thumb.lm-mod-active {
  background: #a0a0a0;
}

.lm-ScrollBar[data-orientation='horizontal'] .lm-ScrollBar-thumb {
  height: 100%;
  min-width: 15px;
  border-left: 1px solid #a0a0a0;
  border-right: 1px solid #a0a0a0;
}

.lm-ScrollBar[data-orientation='vertical'] .lm-ScrollBar-thumb {
  width: 100%;
  min-height: 15px;
  border-top: 1px solid #a0a0a0;
  border-bottom: 1px solid #a0a0a0;
}

.lm-ScrollBar[data-orientation='horizontal']
  .lm-ScrollBar-button[data-action='decrement'] {
  background-image: var(--jp-icon-caret-left);
  background-size: 17px;
}

.lm-ScrollBar[data-orientation='horizontal']
  .lm-ScrollBar-button[data-action='increment'] {
  background-image: var(--jp-icon-caret-right);
  background-size: 17px;
}

.lm-ScrollBar[data-orientation='vertical']
  .lm-ScrollBar-button[data-action='decrement'] {
  background-image: var(--jp-icon-caret-up);
  background-size: 17px;
}

.lm-ScrollBar[data-orientation='vertical']
  .lm-ScrollBar-button[data-action='increment'] {
  background-image: var(--jp-icon-caret-down);
  background-size: 17px;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Copyright (c) 2014-2017, PhosphorJS Contributors
|
| Distributed under the terms of the BSD 3-Clause License.
|
| The full license is in the file LICENSE, distributed with this software.
|----------------------------------------------------------------------------*/

.lm-Widget {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.lm-Widget.lm-mod-hidden {
  display: none !important;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

.lm-AccordionPanel[data-orientation='horizontal'] > .lm-AccordionPanel-title {
  /* Title is rotated for horizontal accordion panel using CSS */
  display: block;
  transform-origin: top left;
  transform: rotate(-90deg) translate(-100%);
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Copyright (c) 2014-2017, PhosphorJS Contributors
|
| Distributed under the terms of the BSD 3-Clause License.
|
| The full license is in the file LICENSE, distributed with this software.
|----------------------------------------------------------------------------*/

.lm-CommandPalette {
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.lm-CommandPalette-search {
  flex: 0 0 auto;
}

.lm-CommandPalette-content {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  min-height: 0;
  overflow: auto;
  list-style-type: none;
}

.lm-CommandPalette-header {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lm-CommandPalette-item {
  display: flex;
  flex-direction: row;
}

.lm-CommandPalette-itemIcon {
  flex: 0 0 auto;
}

.lm-CommandPalette-itemContent {
  flex: 1 1 auto;
  overflow: hidden;
}

.lm-CommandPalette-itemShortcut {
  flex: 0 0 auto;
}

.lm-CommandPalette-itemLabel {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lm-close-icon {
  border: 1px solid transparent;
  background-color: transparent;
  position: absolute;
  z-index: 1;
  right: 3%;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 7px 0;
  display: none;
  vertical-align: middle;
  outline: 0;
  cursor: pointer;
}
.lm-close-icon:after {
  content: 'X';
  display: block;
  width: 15px;
  height: 15px;
  text-align: center;
  color: #000;
  font-weight: normal;
  font-size: 12px;
  cursor: pointer;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Copyright (c) 2014-2017, PhosphorJS Contributors
|
| Distributed under the terms of the BSD 3-Clause License.
|
| The full license is in the file LICENSE, distributed with this software.
|----------------------------------------------------------------------------*/

.lm-DockPanel {
  z-index: 0;
}

.lm-DockPanel-widget {
  z-index: 0;
}

.lm-DockPanel-tabBar {
  z-index: 1;
}

.lm-DockPanel-handle {
  z-index: 2;
}

.lm-DockPanel-handle.lm-mod-hidden {
  display: none !important;
}

.lm-DockPanel-handle:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
}

.lm-DockPanel-handle[data-orientation='horizontal'] {
  cursor: ew-resize;
}

.lm-DockPanel-handle[data-orientation='vertical'] {
  cursor: ns-resize;
}

.lm-DockPanel-handle[data-orientation='horizontal']:after {
  left: 50%;
  min-width: 8px;
  transform: translateX(-50%);
}

.lm-DockPanel-handle[data-orientation='vertical']:after {
  top: 50%;
  min-height: 8px;
  transform: translateY(-50%);
}

.lm-DockPanel-overlay {
  z-index: 3;
  box-sizing: border-box;
  pointer-events: none;
}

.lm-DockPanel-overlay.lm-mod-hidden {
  display: none !important;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Copyright (c) 2014-2017, PhosphorJS Contributors
|
| Distributed under the terms of the BSD 3-Clause License.
|
| The full license is in the file LICENSE, distributed with this software.
|----------------------------------------------------------------------------*/

.lm-Menu {
  z-index: 10000;
  position: absolute;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: auto;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.lm-Menu-content {
  margin: 0;
  padding: 0;
  display: table;
  list-style-type: none;
}

.lm-Menu-item {
  display: table-row;
}

.lm-Menu-item.lm-mod-hidden,
.lm-Menu-item.lm-mod-collapsed {
  display: none !important;
}

.lm-Menu-itemIcon,
.lm-Menu-itemSubmenuIcon {
  display: table-cell;
  text-align: center;
}

.lm-Menu-itemLabel {
  display: table-cell;
  text-align: left;
}

.lm-Menu-itemShortcut {
  display: table-cell;
  text-align: right;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Copyright (c) 2014-2017, PhosphorJS Contributors
|
| Distributed under the terms of the BSD 3-Clause License.
|
| The full license is in the file LICENSE, distributed with this software.
|----------------------------------------------------------------------------*/

.lm-MenuBar {
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.lm-MenuBar-content {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  list-style-type: none;
}

.lm-MenuBar-item {
  box-sizing: border-box;
}

.lm-MenuBar-itemIcon,
.lm-MenuBar-itemLabel {
  display: inline-block;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Copyright (c) 2014-2017, PhosphorJS Contributors
|
| Distributed under the terms of the BSD 3-Clause License.
|
| The full license is in the file LICENSE, distributed with this software.
|----------------------------------------------------------------------------*/

.lm-ScrollBar {
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.lm-ScrollBar[data-orientation='horizontal'] {
  flex-direction: row;
}

.lm-ScrollBar[data-orientation='vertical'] {
  flex-direction: column;
}

.lm-ScrollBar-button {
  box-sizing: border-box;
  flex: 0 0 auto;
}

.lm-ScrollBar-track {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
}

.lm-ScrollBar-thumb {
  box-sizing: border-box;
  position: absolute;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Copyright (c) 2014-2017, PhosphorJS Contributors
|
| Distributed under the terms of the BSD 3-Clause License.
|
| The full license is in the file LICENSE, distributed with this software.
|----------------------------------------------------------------------------*/

.lm-SplitPanel-child {
  z-index: 0;
}

.lm-SplitPanel-handle {
  z-index: 1;
}

.lm-SplitPanel-handle.lm-mod-hidden {
  display: none !important;
}

.lm-SplitPanel-handle:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
}

.lm-SplitPanel[data-orientation='horizontal'] > .lm-SplitPanel-handle {
  cursor: ew-resize;
}

.lm-SplitPanel[data-orientation='vertical'] > .lm-SplitPanel-handle {
  cursor: ns-resize;
}

.lm-SplitPanel[data-orientation='horizontal'] > .lm-SplitPanel-handle:after {
  left: 50%;
  min-width: 8px;
  transform: translateX(-50%);
}

.lm-SplitPanel[data-orientation='vertical'] > .lm-SplitPanel-handle:after {
  top: 50%;
  min-height: 8px;
  transform: translateY(-50%);
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Copyright (c) 2014-2017, PhosphorJS Contributors
|
| Distributed under the terms of the BSD 3-Clause License.
|
| The full license is in the file LICENSE, distributed with this software.
|----------------------------------------------------------------------------*/

.lm-TabBar {
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.lm-TabBar[data-orientation='horizontal'] {
  flex-direction: row;
  align-items: flex-end;
}

.lm-TabBar[data-orientation='vertical'] {
  flex-direction: column;
  align-items: flex-end;
}

.lm-TabBar-content {
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1 1 auto;
  list-style-type: none;
}

.lm-TabBar[data-orientation='horizontal'] > .lm-TabBar-content {
  flex-direction: row;
}

.lm-TabBar[data-orientation='vertical'] > .lm-TabBar-content {
  flex-direction: column;
}

.lm-TabBar-tab {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  overflow: hidden;
  touch-action: none; /* Disable native Drag/Drop */
}

.lm-TabBar-tabIcon,
.lm-TabBar-tabCloseIcon {
  flex: 0 0 auto;
}

.lm-TabBar-tabLabel {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
}

.lm-TabBar-tabInput {
  user-select: all;
  width: 100%;
  box-sizing: border-box;
}

.lm-TabBar-tab.lm-mod-hidden {
  display: none !important;
}

.lm-TabBar-addButton.lm-mod-hidden {
  display: none !important;
}

.lm-TabBar.lm-mod-dragging .lm-TabBar-tab {
  position: relative;
}

.lm-TabBar.lm-mod-dragging[data-orientation='horizontal'] .lm-TabBar-tab {
  left: 0;
  transition: left 150ms ease;
}

.lm-TabBar.lm-mod-dragging[data-orientation='vertical'] .lm-TabBar-tab {
  top: 0;
  transition: top 150ms ease;
}

.lm-TabBar.lm-mod-dragging .lm-TabBar-tab.lm-mod-dragging {
  transition: none;
}

.lm-TabBar-tabLabel .lm-TabBar-tabInput {
  user-select: all;
  width: 100%;
  box-sizing: border-box;
  background: inherit;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Copyright (c) 2014-2017, PhosphorJS Contributors
|
| Distributed under the terms of the BSD 3-Clause License.
|
| The full license is in the file LICENSE, distributed with this software.
|----------------------------------------------------------------------------*/

.lm-TabPanel-tabBar {
  z-index: 1;
}

.lm-TabPanel-stackedPanel {
  z-index: 0;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Copyright (c) 2014-2017, PhosphorJS Contributors
|
| Distributed under the terms of the BSD 3-Clause License.
|
| The full license is in the file LICENSE, distributed with this software.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-Collapse {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.jp-Collapse-header {
  padding: 1px 12px;
  background-color: var(--jp-layout-color1);
  border-bottom: solid var(--jp-border-width) var(--jp-border-color2);
  color: var(--jp-ui-font-color1);
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: var(--jp-ui-font-size0);
  font-weight: 600;
  text-transform: uppercase;
  user-select: none;
}

.jp-Collapser-icon {
  height: 16px;
}

.jp-Collapse-header-collapsed .jp-Collapser-icon {
  transform: rotate(-90deg);
  margin: auto 0;
}

.jp-Collapser-title {
  line-height: 25px;
}

.jp-Collapse-contents {
  padding: 0 12px;
  background-color: var(--jp-layout-color1);
  color: var(--jp-ui-font-color1);
  overflow: auto;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/* This file was auto-generated by ensureUiComponents() in @jupyterlab/buildutils */

/**
 * (DEPRECATED) Support for consuming icons as CSS background images
 */

/* Icons urls */

:root {
  --jp-icon-add-above: url();
  --jp-icon-add-below: url();
  --jp-icon-add: url();
  --jp-icon-bell: url();
  --jp-icon-bug-dot: url();
  --jp-icon-bug: url();
  --jp-icon-build: url();
  --jp-icon-caret-down-empty-thin: url();
  --jp-icon-caret-down-empty: url();
  --jp-icon-caret-down: url();
  --jp-icon-caret-left: url();
  --jp-icon-caret-right: url();
  --jp-icon-caret-up-empty-thin: url();
  --jp-icon-caret-up: url();
  --jp-icon-case-sensitive: url();
  --jp-icon-check: url();
  --jp-icon-circle-empty: url();
  --jp-icon-circle: url();
  --jp-icon-clear: url();
  --jp-icon-close: url();
  --jp-icon-code-check: url();
  --jp-icon-code: url();
  --jp-icon-collapse-all: url();
  --jp-icon-console: url();
  --jp-icon-copy: url();
  --jp-icon-copyright: url();
  --jp-icon-cut: url();
  --jp-icon-delete: url();
  --jp-icon-download: url();
  --jp-icon-duplicate: url();
  --jp-icon-edit: url();
  --jp-icon-ellipses: url();
  --jp-icon-error: url();
  --jp-icon-expand-all: url();
  --jp-icon-extension: url();
  --jp-icon-fast-forward: url();
  --jp-icon-file-upload: url();
  --jp-icon-file: url();
  --jp-icon-filter-dot: url();
  --jp-icon-filter-list: url();
  --jp-icon-filter: url();
  --jp-icon-folder-favorite: url();
  --jp-icon-folder: url();
  --jp-icon-home: url();
  --jp-icon-html5: url();
  --jp-icon-image: url();
  --jp-icon-info: url();
  --jp-icon-inspector: url();
  --jp-icon-json: url();
  --jp-icon-julia: url();
  --jp-icon-jupyter-favicon: url();
  --jp-icon-jupyter: url();
  --jp-icon-jupyterlab-wordmark: url();
  --jp-icon-kernel: url();
  --jp-icon-keyboard: url();
  --jp-icon-launch: url();
  --jp-icon-launcher: url();
  --jp-icon-line-form: url();
  --jp-icon-link: url();
  --jp-icon-list: url();
  --jp-icon-markdown: url();
  --jp-icon-move-down: url();
  --jp-icon-move-up: url();
  --jp-icon-new-folder: url();
  --jp-icon-not-trusted: url();
  --jp-icon-notebook: url();
  --jp-icon-numbering: url();
  --jp-icon-offline-bolt: url();
  --jp-icon-palette: url();
  --jp-icon-paste: url();
  --jp-icon-pdf: url();
  --jp-icon-python: url();
  --jp-icon-r-kernel: url();
  --jp-icon-react: url();
  --jp-icon-redo: url();
  --jp-icon-refresh: url();
  --jp-icon-regex: url();
  --jp-icon-run: url();
  --jp-icon-running: url();
  --jp-icon-save: url();
  --jp-icon-search: url();
  --jp-icon-settings: url();
  --jp-icon-share: url();
  --jp-icon-spreadsheet: url();
  --jp-icon-stop: url();
  --jp-icon-tab: url();
  --jp-icon-table-rows: url();
  --jp-icon-tag: url();
  --jp-icon-terminal: url();
  --jp-icon-text-editor: url();
  --jp-icon-toc: url();
  --jp-icon-tree-view: url();
  --jp-icon-trusted: url();
  --jp-icon-undo: url();
  --jp-icon-user: url();
  --jp-icon-users: url();
  --jp-icon-vega: url();
  --jp-icon-word: url();
  --jp-icon-yaml: url();
}

/* Icon CSS class declarations */

.jp-AddAboveIcon {
  background-image: var(--jp-icon-add-above);
}

.jp-AddBelowIcon {
  background-image: var(--jp-icon-add-below);
}

.jp-AddIcon {
  background-image: var(--jp-icon-add);
}

.jp-BellIcon {
  background-image: var(--jp-icon-bell);
}

.jp-BugDotIcon {
  background-image: var(--jp-icon-bug-dot);
}

.jp-BugIcon {
  background-image: var(--jp-icon-bug);
}

.jp-BuildIcon {
  background-image: var(--jp-icon-build);
}

.jp-CaretDownEmptyIcon {
  background-image: var(--jp-icon-caret-down-empty);
}

.jp-CaretDownEmptyThinIcon {
  background-image: var(--jp-icon-caret-down-empty-thin);
}

.jp-CaretDownIcon {
  background-image: var(--jp-icon-caret-down);
}

.jp-CaretLeftIcon {
  background-image: var(--jp-icon-caret-left);
}

.jp-CaretRightIcon {
  background-image: var(--jp-icon-caret-right);
}

.jp-CaretUpEmptyThinIcon {
  background-image: var(--jp-icon-caret-up-empty-thin);
}

.jp-CaretUpIcon {
  background-image: var(--jp-icon-caret-up);
}

.jp-CaseSensitiveIcon {
  background-image: var(--jp-icon-case-sensitive);
}

.jp-CheckIcon {
  background-image: var(--jp-icon-check);
}

.jp-CircleEmptyIcon {
  background-image: var(--jp-icon-circle-empty);
}

.jp-CircleIcon {
  background-image: var(--jp-icon-circle);
}

.jp-ClearIcon {
  background-image: var(--jp-icon-clear);
}

.jp-CloseIcon {
  background-image: var(--jp-icon-close);
}

.jp-CodeCheckIcon {
  background-image: var(--jp-icon-code-check);
}

.jp-CodeIcon {
  background-image: var(--jp-icon-code);
}

.jp-CollapseAllIcon {
  background-image: var(--jp-icon-collapse-all);
}

.jp-ConsoleIcon {
  background-image: var(--jp-icon-console);
}

.jp-CopyIcon {
  background-image: var(--jp-icon-copy);
}

.jp-CopyrightIcon {
  background-image: var(--jp-icon-copyright);
}

.jp-CutIcon {
  background-image: var(--jp-icon-cut);
}

.jp-DeleteIcon {
  background-image: var(--jp-icon-delete);
}

.jp-DownloadIcon {
  background-image: var(--jp-icon-download);
}

.jp-DuplicateIcon {
  background-image: var(--jp-icon-duplicate);
}

.jp-EditIcon {
  background-image: var(--jp-icon-edit);
}

.jp-EllipsesIcon {
  background-image: var(--jp-icon-ellipses);
}

.jp-ErrorIcon {
  background-image: var(--jp-icon-error);
}

.jp-ExpandAllIcon {
  background-image: var(--jp-icon-expand-all);
}

.jp-ExtensionIcon {
  background-image: var(--jp-icon-extension);
}

.jp-FastForwardIcon {
  background-image: var(--jp-icon-fast-forward);
}

.jp-FileIcon {
  background-image: var(--jp-icon-file);
}

.jp-FileUploadIcon {
  background-image: var(--jp-icon-file-upload);
}

.jp-FilterDotIcon {
  background-image: var(--jp-icon-filter-dot);
}

.jp-FilterIcon {
  background-image: var(--jp-icon-filter);
}

.jp-FilterListIcon {
  background-image: var(--jp-icon-filter-list);
}

.jp-FolderFavoriteIcon {
  background-image: var(--jp-icon-folder-favorite);
}

.jp-FolderIcon {
  background-image: var(--jp-icon-folder);
}

.jp-HomeIcon {
  background-image: var(--jp-icon-home);
}

.jp-Html5Icon {
  background-image: var(--jp-icon-html5);
}

.jp-ImageIcon {
  background-image: var(--jp-icon-image);
}

.jp-InfoIcon {
  background-image: var(--jp-icon-info);
}

.jp-InspectorIcon {
  background-image: var(--jp-icon-inspector);
}

.jp-JsonIcon {
  background-image: var(--jp-icon-json);
}

.jp-JuliaIcon {
  background-image: var(--jp-icon-julia);
}

.jp-JupyterFaviconIcon {
  background-image: var(--jp-icon-jupyter-favicon);
}

.jp-JupyterIcon {
  background-image: var(--jp-icon-jupyter);
}

.jp-JupyterlabWordmarkIcon {
  background-image: var(--jp-icon-jupyterlab-wordmark);
}

.jp-KernelIcon {
  background-image: var(--jp-icon-kernel);
}

.jp-KeyboardIcon {
  background-image: var(--jp-icon-keyboard);
}

.jp-LaunchIcon {
  background-image: var(--jp-icon-launch);
}

.jp-LauncherIcon {
  background-image: var(--jp-icon-launcher);
}

.jp-LineFormIcon {
  background-image: var(--jp-icon-line-form);
}

.jp-LinkIcon {
  background-image: var(--jp-icon-link);
}

.jp-ListIcon {
  background-image: var(--jp-icon-list);
}

.jp-MarkdownIcon {
  background-image: var(--jp-icon-markdown);
}

.jp-MoveDownIcon {
  background-image: var(--jp-icon-move-down);
}

.jp-MoveUpIcon {
  background-image: var(--jp-icon-move-up);
}

.jp-NewFolderIcon {
  background-image: var(--jp-icon-new-folder);
}

.jp-NotTrustedIcon {
  background-image: var(--jp-icon-not-trusted);
}

.jp-NotebookIcon {
  background-image: var(--jp-icon-notebook);
}

.jp-NumberingIcon {
  background-image: var(--jp-icon-numbering);
}

.jp-OfflineBoltIcon {
  background-image: var(--jp-icon-offline-bolt);
}

.jp-PaletteIcon {
  background-image: var(--jp-icon-palette);
}

.jp-PasteIcon {
  background-image: var(--jp-icon-paste);
}

.jp-PdfIcon {
  background-image: var(--jp-icon-pdf);
}

.jp-PythonIcon {
  background-image: var(--jp-icon-python);
}

.jp-RKernelIcon {
  background-image: var(--jp-icon-r-kernel);
}

.jp-ReactIcon {
  background-image: var(--jp-icon-react);
}

.jp-RedoIcon {
  background-image: var(--jp-icon-redo);
}

.jp-RefreshIcon {
  background-image: var(--jp-icon-refresh);
}

.jp-RegexIcon {
  background-image: var(--jp-icon-regex);
}

.jp-RunIcon {
  background-image: var(--jp-icon-run);
}

.jp-RunningIcon {
  background-image: var(--jp-icon-running);
}

.jp-SaveIcon {
  background-image: var(--jp-icon-save);
}

.jp-SearchIcon {
  background-image: var(--jp-icon-search);
}

.jp-SettingsIcon {
  background-image: var(--jp-icon-settings);
}

.jp-ShareIcon {
  background-image: var(--jp-icon-share);
}

.jp-SpreadsheetIcon {
  background-image: var(--jp-icon-spreadsheet);
}

.jp-StopIcon {
  background-image: var(--jp-icon-stop);
}

.jp-TabIcon {
  background-image: var(--jp-icon-tab);
}

.jp-TableRowsIcon {
  background-image: var(--jp-icon-table-rows);
}

.jp-TagIcon {
  background-image: var(--jp-icon-tag);
}

.jp-TerminalIcon {
  background-image: var(--jp-icon-terminal);
}

.jp-TextEditorIcon {
  background-image: var(--jp-icon-text-editor);
}

.jp-TocIcon {
  background-image: var(--jp-icon-toc);
}

.jp-TreeViewIcon {
  background-image: var(--jp-icon-tree-view);
}

.jp-TrustedIcon {
  background-image: var(--jp-icon-trusted);
}

.jp-UndoIcon {
  background-image: var(--jp-icon-undo);
}

.jp-UserIcon {
  background-image: var(--jp-icon-user);
}

.jp-UsersIcon {
  background-image: var(--jp-icon-users);
}

.jp-VegaIcon {
  background-image: var(--jp-icon-vega);
}

.jp-WordIcon {
  background-image: var(--jp-icon-word);
}

.jp-YamlIcon {
  background-image: var(--jp-icon-yaml);
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/**
 * (DEPRECATED) Support for consuming icons as CSS background images
 */

.jp-Icon,
.jp-MaterialIcon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
  min-width: 16px;
  min-height: 16px;
}

.jp-Icon-cover {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/**
 * (DEPRECATED) Support for specific CSS icon sizes
 */

.jp-Icon-16 {
  background-size: 16px;
  min-width: 16px;
  min-height: 16px;
}

.jp-Icon-18 {
  background-size: 18px;
  min-width: 18px;
  min-height: 18px;
}

.jp-Icon-20 {
  background-size: 20px;
  min-width: 20px;
  min-height: 20px;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.lm-TabBar .lm-TabBar-addButton {
  align-items: center;
  display: flex;
  padding: 4px;
  padding-bottom: 5px;
  margin-right: 1px;
  background-color: var(--jp-layout-color2);
}

.lm-TabBar .lm-TabBar-addButton:hover {
  background-color: var(--jp-layout-color1);
}

.lm-DockPanel-tabBar .lm-TabBar-tab {
  width: var(--jp-private-horizontal-tab-width);
}

.lm-DockPanel-tabBar .lm-TabBar-content {
  flex: unset;
}

.lm-DockPanel-tabBar[data-orientation='horizontal'] {
  flex: 1 1 auto;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/**
 * Support for icons as inline SVG HTMLElements
 */

/* recolor the primary elements of an icon */
.jp-icon0[fill] {
  fill: var(--jp-inverse-layout-color0);
}

.jp-icon1[fill] {
  fill: var(--jp-inverse-layout-color1);
}

.jp-icon2[fill] {
  fill: var(--jp-inverse-layout-color2);
}

.jp-icon3[fill] {
  fill: var(--jp-inverse-layout-color3);
}

.jp-icon4[fill] {
  fill: var(--jp-inverse-layout-color4);
}

.jp-icon0[stroke] {
  stroke: var(--jp-inverse-layout-color0);
}

.jp-icon1[stroke] {
  stroke: var(--jp-inverse-layout-color1);
}

.jp-icon2[stroke] {
  stroke: var(--jp-inverse-layout-color2);
}

.jp-icon3[stroke] {
  stroke: var(--jp-inverse-layout-color3);
}

.jp-icon4[stroke] {
  stroke: var(--jp-inverse-layout-color4);
}

/* recolor the accent elements of an icon */
.jp-icon-accent0[fill] {
  fill: var(--jp-layout-color0);
}

.jp-icon-accent1[fill] {
  fill: var(--jp-layout-color1);
}

.jp-icon-accent2[fill] {
  fill: var(--jp-layout-color2);
}

.jp-icon-accent3[fill] {
  fill: var(--jp-layout-color3);
}

.jp-icon-accent4[fill] {
  fill: var(--jp-layout-color4);
}

.jp-icon-accent0[stroke] {
  stroke: var(--jp-layout-color0);
}

.jp-icon-accent1[stroke] {
  stroke: var(--jp-layout-color1);
}

.jp-icon-accent2[stroke] {
  stroke: var(--jp-layout-color2);
}

.jp-icon-accent3[stroke] {
  stroke: var(--jp-layout-color3);
}

.jp-icon-accent4[stroke] {
  stroke: var(--jp-layout-color4);
}

/* set the color of an icon to transparent */
.jp-icon-none[fill] {
  fill: none;
}

.jp-icon-none[stroke] {
  stroke: none;
}

/* brand icon colors. Same for light and dark */
.jp-icon-brand0[fill] {
  fill: var(--jp-brand-color0);
}

.jp-icon-brand1[fill] {
  fill: var(--jp-brand-color1);
}

.jp-icon-brand2[fill] {
  fill: var(--jp-brand-color2);
}

.jp-icon-brand3[fill] {
  fill: var(--jp-brand-color3);
}

.jp-icon-brand4[fill] {
  fill: var(--jp-brand-color4);
}

.jp-icon-brand0[stroke] {
  stroke: var(--jp-brand-color0);
}

.jp-icon-brand1[stroke] {
  stroke: var(--jp-brand-color1);
}

.jp-icon-brand2[stroke] {
  stroke: var(--jp-brand-color2);
}

.jp-icon-brand3[stroke] {
  stroke: var(--jp-brand-color3);
}

.jp-icon-brand4[stroke] {
  stroke: var(--jp-brand-color4);
}

/* warn icon colors. Same for light and dark */
.jp-icon-warn0[fill] {
  fill: var(--jp-warn-color0);
}

.jp-icon-warn1[fill] {
  fill: var(--jp-warn-color1);
}

.jp-icon-warn2[fill] {
  fill: var(--jp-warn-color2);
}

.jp-icon-warn3[fill] {
  fill: var(--jp-warn-color3);
}

.jp-icon-warn0[stroke] {
  stroke: var(--jp-warn-color0);
}

.jp-icon-warn1[stroke] {
  stroke: var(--jp-warn-color1);
}

.jp-icon-warn2[stroke] {
  stroke: var(--jp-warn-color2);
}

.jp-icon-warn3[stroke] {
  stroke: var(--jp-warn-color3);
}

/* icon colors that contrast well with each other and most backgrounds */
.jp-icon-contrast0[fill] {
  fill: var(--jp-icon-contrast-color0);
}

.jp-icon-contrast1[fill] {
  fill: var(--jp-icon-contrast-color1);
}

.jp-icon-contrast2[fill] {
  fill: var(--jp-icon-contrast-color2);
}

.jp-icon-contrast3[fill] {
  fill: var(--jp-icon-contrast-color3);
}

.jp-icon-contrast0[stroke] {
  stroke: var(--jp-icon-contrast-color0);
}

.jp-icon-contrast1[stroke] {
  stroke: var(--jp-icon-contrast-color1);
}

.jp-icon-contrast2[stroke] {
  stroke: var(--jp-icon-contrast-color2);
}

.jp-icon-contrast3[stroke] {
  stroke: var(--jp-icon-contrast-color3);
}

.jp-icon-dot[fill] {
  fill: var(--jp-warn-color0);
}

.jp-jupyter-icon-color[fill] {
  fill: var(--jp-jupyter-icon-color, var(--jp-warn-color0));
}

.jp-notebook-icon-color[fill] {
  fill: var(--jp-notebook-icon-color, var(--jp-warn-color0));
}

.jp-json-icon-color[fill] {
  fill: var(--jp-json-icon-color, var(--jp-warn-color1));
}

.jp-console-icon-color[fill] {
  fill: var(--jp-console-icon-color, white);
}

.jp-console-icon-background-color[fill] {
  fill: var(--jp-console-icon-background-color, var(--jp-brand-color1));
}

.jp-terminal-icon-color[fill] {
  fill: var(--jp-terminal-icon-color, var(--jp-layout-color2));
}

.jp-terminal-icon-background-color[fill] {
  fill: var(
    --jp-terminal-icon-background-color,
    var(--jp-inverse-layout-color2)
  );
}

.jp-text-editor-icon-color[fill] {
  fill: var(--jp-text-editor-icon-color, var(--jp-inverse-layout-color3));
}

.jp-inspector-icon-color[fill] {
  fill: var(--jp-inspector-icon-color, var(--jp-inverse-layout-color3));
}

/* CSS for icons in selected filebrowser listing items */
.jp-DirListing-item.jp-mod-selected .jp-icon-selectable[fill] {
  fill: #fff;
}

.jp-DirListing-item.jp-mod-selected .jp-icon-selectable-inverse[fill] {
  fill: var(--jp-brand-color1);
}

/* stylelint-disable selector-max-class, selector-max-compound-selectors */

/**
* TODO: come up with non css-hack solution for showing the busy icon on top
*  of the close icon
* CSS for complex behavior of close icon of tabs in the main area tabbar
*/
.lm-DockPanel-tabBar
  .lm-TabBar-tab.lm-mod-closable.jp-mod-dirty
  > .lm-TabBar-tabCloseIcon
  > :not(:hover)
  > .jp-icon3[fill] {
  fill: none;
}

.lm-DockPanel-tabBar
  .lm-TabBar-tab.lm-mod-closable.jp-mod-dirty
  > .lm-TabBar-tabCloseIcon
  > :not(:hover)
  > .jp-icon-busy[fill] {
  fill: var(--jp-inverse-layout-color3);
}

/* stylelint-enable selector-max-class, selector-max-compound-selectors */

/* CSS for icons in status bar */
#jp-main-statusbar .jp-mod-selected .jp-icon-selectable[fill] {
  fill: #fff;
}

#jp-main-statusbar .jp-mod-selected .jp-icon-selectable-inverse[fill] {
  fill: var(--jp-brand-color1);
}

/* special handling for splash icon CSS. While the theme CSS reloads during
   splash, the splash icon can loose theming. To prevent that, we set a
   default for its color variable */
:root {
  --jp-warn-color0: var(--md-orange-700);
}

/* not sure what to do with this one, used in filebrowser listing */
.jp-DragIcon {
  margin-right: 4px;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/**
 * Support for alt colors for icons as inline SVG HTMLElements
 */

/* alt recolor the primary elements of an icon */
.jp-icon-alt .jp-icon0[fill] {
  fill: var(--jp-layout-color0);
}

.jp-icon-alt .jp-icon1[fill] {
  fill: var(--jp-layout-color1);
}

.jp-icon-alt .jp-icon2[fill] {
  fill: var(--jp-layout-color2);
}

.jp-icon-alt .jp-icon3[fill] {
  fill: var(--jp-layout-color3);
}

.jp-icon-alt .jp-icon4[fill] {
  fill: var(--jp-layout-color4);
}

.jp-icon-alt .jp-icon0[stroke] {
  stroke: var(--jp-layout-color0);
}

.jp-icon-alt .jp-icon1[stroke] {
  stroke: var(--jp-layout-color1);
}

.jp-icon-alt .jp-icon2[stroke] {
  stroke: var(--jp-layout-color2);
}

.jp-icon-alt .jp-icon3[stroke] {
  stroke: var(--jp-layout-color3);
}

.jp-icon-alt .jp-icon4[stroke] {
  stroke: var(--jp-layout-color4);
}

/* alt recolor the accent elements of an icon */
.jp-icon-alt .jp-icon-accent0[fill] {
  fill: var(--jp-inverse-layout-color0);
}

.jp-icon-alt .jp-icon-accent1[fill] {
  fill: var(--jp-inverse-layout-color1);
}

.jp-icon-alt .jp-icon-accent2[fill] {
  fill: var(--jp-inverse-layout-color2);
}

.jp-icon-alt .jp-icon-accent3[fill] {
  fill: var(--jp-inverse-layout-color3);
}

.jp-icon-alt .jp-icon-accent4[fill] {
  fill: var(--jp-inverse-layout-color4);
}

.jp-icon-alt .jp-icon-accent0[stroke] {
  stroke: var(--jp-inverse-layout-color0);
}

.jp-icon-alt .jp-icon-accent1[stroke] {
  stroke: var(--jp-inverse-layout-color1);
}

.jp-icon-alt .jp-icon-accent2[stroke] {
  stroke: var(--jp-inverse-layout-color2);
}

.jp-icon-alt .jp-icon-accent3[stroke] {
  stroke: var(--jp-inverse-layout-color3);
}

.jp-icon-alt .jp-icon-accent4[stroke] {
  stroke: var(--jp-inverse-layout-color4);
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-icon-hoverShow:not(:hover) .jp-icon-hoverShow-content {
  display: none !important;
}

/**
 * Support for hover colors for icons as inline SVG HTMLElements
 */

/**
 * regular colors
 */

/* recolor the primary elements of an icon */
.jp-icon-hover :hover .jp-icon0-hover[fill] {
  fill: var(--jp-inverse-layout-color0);
}

.jp-icon-hover :hover .jp-icon1-hover[fill] {
  fill: var(--jp-inverse-layout-color1);
}

.jp-icon-hover :hover .jp-icon2-hover[fill] {
  fill: var(--jp-inverse-layout-color2);
}

.jp-icon-hover :hover .jp-icon3-hover[fill] {
  fill: var(--jp-inverse-layout-color3);
}

.jp-icon-hover :hover .jp-icon4-hover[fill] {
  fill: var(--jp-inverse-layout-color4);
}

.jp-icon-hover :hover .jp-icon0-hover[stroke] {
  stroke: var(--jp-inverse-layout-color0);
}

.jp-icon-hover :hover .jp-icon1-hover[stroke] {
  stroke: var(--jp-inverse-layout-color1);
}

.jp-icon-hover :hover .jp-icon2-hover[stroke] {
  stroke: var(--jp-inverse-layout-color2);
}

.jp-icon-hover :hover .jp-icon3-hover[stroke] {
  stroke: var(--jp-inverse-layout-color3);
}

.jp-icon-hover :hover .jp-icon4-hover[stroke] {
  stroke: var(--jp-inverse-layout-color4);
}

/* recolor the accent elements of an icon */
.jp-icon-hover :hover .jp-icon-accent0-hover[fill] {
  fill: var(--jp-layout-color0);
}

.jp-icon-hover :hover .jp-icon-accent1-hover[fill] {
  fill: var(--jp-layout-color1);
}

.jp-icon-hover :hover .jp-icon-accent2-hover[fill] {
  fill: var(--jp-layout-color2);
}

.jp-icon-hover :hover .jp-icon-accent3-hover[fill] {
  fill: var(--jp-layout-color3);
}

.jp-icon-hover :hover .jp-icon-accent4-hover[fill] {
  fill: var(--jp-layout-color4);
}

.jp-icon-hover :hover .jp-icon-accent0-hover[stroke] {
  stroke: var(--jp-layout-color0);
}

.jp-icon-hover :hover .jp-icon-accent1-hover[stroke] {
  stroke: var(--jp-layout-color1);
}

.jp-icon-hover :hover .jp-icon-accent2-hover[stroke] {
  stroke: var(--jp-layout-color2);
}

.jp-icon-hover :hover .jp-icon-accent3-hover[stroke] {
  stroke: var(--jp-layout-color3);
}

.jp-icon-hover :hover .jp-icon-accent4-hover[stroke] {
  stroke: var(--jp-layout-color4);
}

/* set the color of an icon to transparent */
.jp-icon-hover :hover .jp-icon-none-hover[fill] {
  fill: none;
}

.jp-icon-hover :hover .jp-icon-none-hover[stroke] {
  stroke: none;
}

/**
 * inverse colors
 */

/* inverse recolor the primary elements of an icon */
.jp-icon-hover.jp-icon-alt :hover .jp-icon0-hover[fill] {
  fill: var(--jp-layout-color0);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon1-hover[fill] {
  fill: var(--jp-layout-color1);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon2-hover[fill] {
  fill: var(--jp-layout-color2);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon3-hover[fill] {
  fill: var(--jp-layout-color3);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon4-hover[fill] {
  fill: var(--jp-layout-color4);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon0-hover[stroke] {
  stroke: var(--jp-layout-color0);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon1-hover[stroke] {
  stroke: var(--jp-layout-color1);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon2-hover[stroke] {
  stroke: var(--jp-layout-color2);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon3-hover[stroke] {
  stroke: var(--jp-layout-color3);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon4-hover[stroke] {
  stroke: var(--jp-layout-color4);
}

/* inverse recolor the accent elements of an icon */
.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent0-hover[fill] {
  fill: var(--jp-inverse-layout-color0);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent1-hover[fill] {
  fill: var(--jp-inverse-layout-color1);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent2-hover[fill] {
  fill: var(--jp-inverse-layout-color2);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent3-hover[fill] {
  fill: var(--jp-inverse-layout-color3);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent4-hover[fill] {
  fill: var(--jp-inverse-layout-color4);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent0-hover[stroke] {
  stroke: var(--jp-inverse-layout-color0);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent1-hover[stroke] {
  stroke: var(--jp-inverse-layout-color1);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent2-hover[stroke] {
  stroke: var(--jp-inverse-layout-color2);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent3-hover[stroke] {
  stroke: var(--jp-inverse-layout-color3);
}

.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent4-hover[stroke] {
  stroke: var(--jp-inverse-layout-color4);
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-IFrame {
  width: 100%;
  height: 100%;
}

.jp-IFrame > iframe {
  border: none;
}

/*
When drag events occur, `lm-mod-override-cursor` is added to the body.
Because iframes steal all cursor events, the following two rules are necessary
to suppress pointer events while resize drags are occurring. There may be a
better solution to this problem.
*/
body.lm-mod-override-cursor .jp-IFrame {
  position: relative;
}

body.lm-mod-override-cursor .jp-IFrame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

/*-----------------------------------------------------------------------------
| Copyright (c) 2014-2016, Jupyter Development Team.
|
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-HoverBox {
  position: fixed;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-FormGroup-content fieldset {
  border: none;
  padding: 0;
  min-width: 0;
  width: 100%;
}

/* stylelint-disable selector-max-type */

.jp-FormGroup-content fieldset .jp-inputFieldWrapper input,
.jp-FormGroup-content fieldset .jp-inputFieldWrapper select,
.jp-FormGroup-content fieldset .jp-inputFieldWrapper textarea {
  font-size: var(--jp-content-font-size2);
  border-color: var(--jp-input-border-color);
  border-style: solid;
  border-radius: var(--jp-border-radius);
  border-width: 1px;
  padding: 6px 8px;
  background: none;
  color: var(--jp-ui-font-color0);
  height: inherit;
}

.jp-FormGroup-content fieldset input[type='checkbox'] {
  position: relative;
  top: 2px;
  margin-left: 0;
}

.jp-FormGroup-content button.jp-mod-styled {
  cursor: pointer;
}

.jp-FormGroup-content .checkbox label {
  cursor: pointer;
  font-size: var(--jp-content-font-size1);
}

.jp-FormGroup-content .jp-root > fieldset > legend {
  display: none;
}

.jp-FormGroup-content .jp-root > fieldset > p {
  display: none;
}

/** copy of `input.jp-mod-styled:focus` style */
.jp-FormGroup-content fieldset input:focus,
.jp-FormGroup-content fieldset select:focus {
  -moz-outline-radius: unset;
  outline: var(--jp-border-width) solid var(--md-blue-500);
  outline-offset: -1px;
  box-shadow: inset 0 0 4px var(--md-blue-300);
}

.jp-FormGroup-content fieldset input:hover:not(:focus),
.jp-FormGroup-content fieldset select:hover:not(:focus) {
  background-color: var(--jp-border-color2);
}

/* stylelint-enable selector-max-type */

.jp-FormGroup-content .checkbox .field-description {
  /* Disable default description field for checkbox:
   because other widgets do not have description fields,
   we add descriptions to each widget on the field level.
  */
  display: none;
}

.jp-FormGroup-content #root__description {
  display: none;
}

.jp-FormGroup-content .jp-modifiedIndicator {
  width: 5px;
  background-color: var(--jp-brand-color2);
  margin-top: 0;
  margin-left: calc(var(--jp-private-settingeditor-modifier-indent) * -1);
  flex-shrink: 0;
}

.jp-FormGroup-content .jp-modifiedIndicator.jp-errorIndicator {
  background-color: var(--jp-error-color0);
  margin-right: 0.5em;
}

/* RJSF ARRAY style */

.jp-arrayFieldWrapper legend {
  font-size: var(--jp-content-font-size2);
  color: var(--jp-ui-font-color0);
  flex-basis: 100%;
  padding: 4px 0;
  font-weight: var(--jp-content-heading-font-weight);
  border-bottom: 1px solid var(--jp-border-color2);
}

.jp-arrayFieldWrapper .field-description {
  padding: 4px 0;
  white-space: pre-wrap;
}

.jp-arrayFieldWrapper .array-item {
  width: 100%;
  border: 1px solid var(--jp-border-color2);
  border-radius: 4px;
  margin: 4px;
}

.jp-ArrayOperations {
  display: flex;
  margin-left: 8px;
}

.jp-ArrayOperationsButton {
  margin: 2px;
}

.jp-ArrayOperationsButton .jp-icon3[fill] {
  fill: var(--jp-ui-font-color0);
}

button.jp-ArrayOperationsButton.jp-mod-styled:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* RJSF form validation error */

.jp-FormGroup-content .validationErrors {
  color: var(--jp-error-color0);
}

/* Hide panel level error as duplicated the field level error */
.jp-FormGroup-content .panel.errors {
  display: none;
}

/* RJSF normal content (settings-editor) */

.jp-FormGroup-contentNormal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.jp-FormGroup-contentNormal .jp-FormGroup-contentItem {
  margin-left: 7px;
  color: var(--jp-ui-font-color0);
}

.jp-FormGroup-contentNormal .jp-FormGroup-description {
  flex-basis: 100%;
  padding: 4px 7px;
}

.jp-FormGroup-contentNormal .jp-FormGroup-default {
  flex-basis: 100%;
  padding: 4px 7px;
}

.jp-FormGroup-contentNormal .jp-FormGroup-fieldLabel {
  font-size: var(--jp-content-font-size1);
  font-weight: normal;
  min-width: 120px;
}

.jp-FormGroup-contentNormal fieldset:not(:first-child) {
  margin-left: 7px;
}

.jp-FormGroup-contentNormal .field-array-of-string .array-item {
  /* Display `jp-ArrayOperations` buttons side-by-side with content except
    for small screens where flex-wrap will place them one below the other.
  */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.jp-FormGroup-contentNormal .jp-objectFieldWrapper .form-group {
  padding: 2px 8px 2px var(--jp-private-settingeditor-modifier-indent);
  margin-top: 2px;
}

/* RJSF compact content (metadata-form) */

.jp-FormGroup-content.jp-FormGroup-contentCompact {
  width: 100%;
}

.jp-FormGroup-contentCompact .form-group {
  display: flex;
  padding: 0.5em 0.2em 0.5em 0;
}

.jp-FormGroup-contentCompact
  .jp-FormGroup-compactTitle
  .jp-FormGroup-description {
  font-size: var(--jp-ui-font-size1);
  color: var(--jp-ui-font-color2);
}

.jp-FormGroup-contentCompact .jp-FormGroup-fieldLabel {
  padding-bottom: 0.3em;
}

.jp-FormGroup-contentCompact .jp-inputFieldWrapper .form-control {
  width: 100%;
  box-sizing: border-box;
}

.jp-FormGroup-contentCompact .jp-arrayFieldWrapper .jp-FormGroup-compactTitle {
  padding-bottom: 7px;
}

.jp-FormGroup-contentCompact
  .jp-objectFieldWrapper
  .jp-objectFieldWrapper
  .form-group {
  padding: 2px 8px 2px var(--jp-private-settingeditor-modifier-indent);
  margin-top: 2px;
}

.jp-FormGroup-contentCompact ul.error-detail {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  padding-inline-start: 1em;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

.jp-SidePanel {
  display: flex;
  flex-direction: column;
  min-width: var(--jp-sidebar-min-width);
  overflow-y: auto;
  color: var(--jp-ui-font-color1);
  background: var(--jp-layout-color1);
  font-size: var(--jp-ui-font-size1);
}

.jp-SidePanel-header {
  flex: 0 0 auto;
  display: flex;
  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
  font-size: var(--jp-ui-font-size0);
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0;
  padding: 2px;
  text-transform: uppercase;
}

.jp-SidePanel-toolbar {
  flex: 0 0 auto;
}

.jp-SidePanel-content {
  flex: 1 1 auto;
}

.jp-SidePanel-toolbar,
.jp-AccordionPanel-toolbar {
  height: var(--jp-private-toolbar-height);
}

.jp-SidePanel-toolbar.jp-Toolbar-micro {
  display: none;
}

.lm-AccordionPanel .jp-AccordionPanel-title {
  box-sizing: border-box;
  line-height: 25px;
  margin: 0;
  display: flex;
  align-items: center;
  background: var(--jp-layout-color1);
  color: var(--jp-ui-font-color1);
  border-bottom: var(--jp-border-width) solid var(--jp-toolbar-border-color);
  box-shadow: var(--jp-toolbar-box-shadow);
  font-size: var(--jp-ui-font-size0);
}

.jp-AccordionPanel-title {
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  text-transform: uppercase;
}

.lm-AccordionPanel[data-orientation='horizontal'] > .jp-AccordionPanel-title {
  /* Title is rotated for horizontal accordion panel using CSS */
  display: block;
  transform-origin: top left;
  transform: rotate(-90deg) translate(-100%);
}

.jp-AccordionPanel-title .lm-AccordionPanel-titleLabel {
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.jp-AccordionPanel-title .lm-AccordionPanel-titleCollapser {
  transform: rotate(-90deg);
  margin: auto 0;
  height: 16px;
}

.jp-AccordionPanel-title.lm-mod-expanded .lm-AccordionPanel-titleCollapser {
  transform: rotate(0deg);
}

.lm-AccordionPanel .jp-AccordionPanel-toolbar {
  background: none;
  box-shadow: none;
  border: none;
  margin-left: auto;
}

.lm-AccordionPanel .lm-SplitPanel-handle:hover {
  background: var(--jp-layout-color3);
}

.jp-text-truncated {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*-----------------------------------------------------------------------------
| Copyright (c) 2017, Jupyter Development Team.
|
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-Spinner {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--jp-layout-color0);
  outline: none;
}

.jp-SpinnerContent {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: var(--jp-brand-color3);
  background: linear-gradient(
    to right,
    #f37626 10%,
    rgba(255, 255, 255, 0) 42%
  );
  position: relative;
  animation: load3 1s infinite linear, fadeIn 1s;
}

.jp-SpinnerContent::before {
  width: 50%;
  height: 50%;
  background: #f37626;
  border-radius: 100% 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}

.jp-SpinnerContent::after {
  background: var(--jp-layout-color0);
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes load3 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*-----------------------------------------------------------------------------
| Copyright (c) 2014-2017, Jupyter Development Team.
|
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

button.jp-mod-styled {
  font-size: var(--jp-ui-font-size1);
  color: var(--jp-ui-font-color0);
  border: none;
  box-sizing: border-box;
  text-align: center;
  line-height: 32px;
  height: 32px;
  padding: 0 12px;
  letter-spacing: 0.8px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input.jp-mod-styled {
  background: var(--jp-input-background);
  height: 28px;
  box-sizing: border-box;
  border: var(--jp-border-width) solid var(--jp-border-color1);
  padding-left: 7px;
  padding-right: 7px;
  font-size: var(--jp-ui-font-size2);
  color: var(--jp-ui-font-color0);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type='checkbox'].jp-mod-styled {
  appearance: checkbox;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  height: auto;
}

input.jp-mod-styled:focus {
  border: var(--jp-border-width) solid var(--md-blue-500);
  box-shadow: inset 0 0 4px var(--md-blue-300);
}

.jp-select-wrapper {
  display: flex;
  position: relative;
  flex-direction: column;
  padding: 1px;
  background-color: var(--jp-layout-color1);
  box-sizing: border-box;
  margin-bottom: 12px;
}

.jp-select-wrapper:not(.multiple) {
  height: 28px;
}

.jp-select-wrapper.jp-mod-focused select.jp-mod-styled {
  border: var(--jp-border-width) solid var(--jp-input-active-border-color);
  box-shadow: var(--jp-input-box-shadow);
  background-color: var(--jp-input-active-background);
}

select.jp-mod-styled:hover {
  cursor: pointer;
  color: var(--jp-ui-font-color0);
  background-color: var(--jp-input-hover-background);
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
}

select.jp-mod-styled {
  flex: 1 1 auto;
  width: 100%;
  font-size: var(--jp-ui-font-size2);
  background: var(--jp-input-background);
  color: var(--jp-ui-font-color0);
  padding: 0 25px 0 8px;
  border: var(--jp-border-width) solid var(--jp-input-border-color);
  border-radius: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select.jp-mod-styled:not([multiple]) {
  height: 32px;
}

select.jp-mod-styled[multiple] {
  max-height: 200px;
  overflow-y: auto;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-switch {
  display: flex;
  align-items: center;
  padding-left: 4px;
  padding-right: 4px;
  font-size: var(--jp-ui-font-size1);
  background-color: transparent;
  color: var(--jp-ui-font-color1);
  border: none;
  height: 20px;
}

.jp-switch:hover {
  background-color: var(--jp-layout-color2);
}

.jp-switch-label {
  margin-right: 5px;
  font-family: var(--jp-ui-font-family);
}

.jp-switch-track {
  cursor: pointer;
  background-color: var(--jp-switch-color, var(--jp-border-color1));
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
  height: 16px;
  width: 35px;
  position: relative;
}

.jp-switch-track::before {
  content: '';
  position: absolute;
  height: 10px;
  width: 10px;
  margin: 3px;
  left: 0;
  background-color: var(--jp-ui-inverse-font-color1);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

.jp-switch[aria-checked='true'] .jp-switch-track {
  background-color: var(--jp-switch-true-position-color, var(--jp-warn-color0));
}

.jp-switch[aria-checked='true'] .jp-switch-track::before {
  /* track width (35) - margins (3 + 3) - thumb width (10) */
  left: 19px;
}

/*-----------------------------------------------------------------------------
| Copyright (c) 2014-2016, Jupyter Development Team.
|
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

:root {
  --jp-private-toolbar-height: calc(
    28px + var(--jp-border-width)
  ); /* leave 28px for content */
}

.jp-Toolbar {
  color: var(--jp-ui-font-color1);
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  border-bottom: var(--jp-border-width) solid var(--jp-toolbar-border-color);
  box-shadow: var(--jp-toolbar-box-shadow);
  background: var(--jp-toolbar-background);
  min-height: var(--jp-toolbar-micro-height);
  padding: 2px;
  z-index: 8;
  overflow-x: hidden;
}

/* Toolbar items */

.jp-Toolbar > .jp-Toolbar-item.jp-Toolbar-spacer {
  flex-grow: 1;
  flex-shrink: 1;
}

.jp-Toolbar-item.jp-Toolbar-kernelStatus {
  display: inline-block;
  width: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}

.jp-Toolbar > .jp-Toolbar-item {
  flex: 0 0 auto;
  display: flex;
  padding-left: 1px;
  padding-right: 1px;
  font-size: var(--jp-ui-font-size1);
  line-height: var(--jp-private-toolbar-height);
  height: 100%;
}

/* Toolbar buttons */

/* This is the div we use to wrap the react component into a Widget */
div.jp-ToolbarButton {
  color: transparent;
  border: none;
  box-sizing: border-box;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0;
  margin: 0;
}

button.jp-ToolbarButtonComponent {
  background: var(--jp-layout-color1);
  border: none;
  box-sizing: border-box;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0 6px;
  margin: 0;
  height: 24px;
  border-radius: var(--jp-border-radius);
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 14px;
  min-width: unset;
  min-height: unset;
}

button.jp-ToolbarButtonComponent:disabled {
  opacity: 0.4;
}

button.jp-ToolbarButtonComponent > span {
  padding: 0;
  flex: 0 0 auto;
}

button.jp-ToolbarButtonComponent .jp-ToolbarButtonComponent-label {
  font-size: var(--jp-ui-font-size1);
  line-height: 100%;
  padding-left: 2px;
  color: var(--jp-ui-font-color1);
  font-family: var(--jp-ui-font-family);
}

#jp-main-dock-panel[data-mode='single-document']
  .jp-MainAreaWidget
  > .jp-Toolbar.jp-Toolbar-micro {
  padding: 0;
  min-height: 0;
}

#jp-main-dock-panel[data-mode='single-document']
  .jp-MainAreaWidget
  > .jp-Toolbar {
  border: none;
  box-shadow: none;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

.jp-WindowedPanel-outer {
  position: relative;
  overflow-y: auto;
}

.jp-WindowedPanel-inner {
  position: relative;
}

.jp-WindowedPanel-window {
  position: absolute;
  left: 0;
  right: 0;
  overflow: visible;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/* Sibling imports */

body {
  color: var(--jp-ui-font-color1);
  font-size: var(--jp-ui-font-size1);
}

/* Disable native link decoration styles everywhere outside of dialog boxes */
a {
  text-decoration: unset;
  color: unset;
}

a:hover {
  text-decoration: unset;
  color: unset;
}

/* Accessibility for links inside dialog box text */
.jp-Dialog-content a {
  text-decoration: revert;
  color: var(--jp-content-link-color);
}

.jp-Dialog-content a:hover {
  text-decoration: revert;
}

/* Styles for ui-components */
.jp-Button {
  color: var(--jp-ui-font-color2);
  border-radius: var(--jp-border-radius);
  padding: 0 12px;
  font-size: var(--jp-ui-font-size1);

  /* Copy from blueprint 3 */
  display: inline-flex;
  flex-direction: row;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  text-align: left;
  vertical-align: middle;
  min-height: 30px;
  min-width: 30px;
}

.jp-Button:disabled {
  cursor: not-allowed;
}

.jp-Button:empty {
  padding: 0 !important;
}

.jp-Button.jp-mod-small {
  min-height: 24px;
  min-width: 24px;
  font-size: 12px;
  padding: 0 7px;
}

/* Use our own theme for hover styles */
.jp-Button.jp-mod-minimal:hover {
  background-color: var(--jp-layout-color2);
}

.jp-Button.jp-mod-minimal {
  background: none;
}

.jp-InputGroup {
  display: block;
  position: relative;
}

.jp-InputGroup input {
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: var(--jp-ui-font-color0);
  box-shadow: inset 0 0 0 var(--jp-border-width) var(--jp-input-border-color);
  padding-bottom: 0;
  padding-top: 0;
  padding-left: 10px;
  padding-right: 28px;
  position: relative;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 14px;
  font-weight: 400;
  height: 30px;
  line-height: 30px;
  outline: none;
  vertical-align: middle;
}

.jp-InputGroup input:focus {
  box-shadow: inset 0 0 0 var(--jp-border-width)
      var(--jp-input-active-box-shadow-color),
    inset 0 0 0 3px var(--jp-input-active-box-shadow-color);
}

.jp-InputGroup input:disabled {
  cursor: not-allowed;
  resize: block;
  background-color: var(--jp-layout-color2);
  color: var(--jp-ui-font-color2);
}

.jp-InputGroup input:disabled ~ span {
  cursor: not-allowed;
  color: var(--jp-ui-font-color2);
}

.jp-InputGroup input::placeholder,
input::placeholder {
  color: var(--jp-ui-font-color2);
}

.jp-InputGroupAction {
  position: absolute;
  bottom: 1px;
  right: 0;
  padding: 6px;
}

.jp-HTMLSelect.jp-DefaultStyle select {
  background-color: initial;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--jp-ui-font-color0);
  display: block;
  font-size: var(--jp-ui-font-size1);
  font-family: var(--jp-ui-font-family);
  height: 24px;
  line-height: 14px;
  padding: 0 25px 0 10px;
  text-align: left;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.jp-HTMLSelect.jp-DefaultStyle select:disabled {
  background-color: var(--jp-layout-color2);
  color: var(--jp-ui-font-color2);
  cursor: not-allowed;
  resize: block;
}

.jp-HTMLSelect.jp-DefaultStyle select:disabled ~ span {
  cursor: not-allowed;
}

/* Use our own theme for hover and option styles */
/* stylelint-disable-next-line selector-max-type */
.jp-HTMLSelect.jp-DefaultStyle select:hover,
.jp-HTMLSelect.jp-DefaultStyle select > option {
  background-color: var(--jp-layout-color2);
  color: var(--jp-ui-font-color0);
}

select {
  box-sizing: border-box;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Styles
|----------------------------------------------------------------------------*/

.jp-StatusBar-Widget {
  display: flex;
  align-items: center;
  background: var(--jp-layout-color2);
  min-height: var(--jp-statusbar-height);
  justify-content: space-between;
  padding: 0 10px;
}

.jp-StatusBar-Left {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.jp-StatusBar-Middle {
  display: flex;
  align-items: center;
}

.jp-StatusBar-Right {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.jp-StatusBar-Item {
  max-height: var(--jp-statusbar-height);
  margin: 0 2px;
  height: var(--jp-statusbar-height);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--jp-ui-font-color1);
  padding: 0 6px;
}

.jp-mod-highlighted:hover {
  background-color: var(--jp-layout-color3);
}

.jp-mod-clicked {
  background-color: var(--jp-brand-color1);
}

.jp-mod-clicked:hover {
  background-color: var(--jp-brand-color0);
}

.jp-mod-clicked .jp-StatusBar-TextItem {
  color: var(--jp-ui-inverse-font-color1);
}

.jp-StatusBar-HoverItem {
  box-shadow: '0px 4px 4px rgba(0, 0, 0, 0.25)';
}

.jp-StatusBar-TextItem {
  font-size: var(--jp-ui-font-size1);
  font-family: var(--jp-ui-font-family);
  line-height: 24px;
  color: var(--jp-ui-font-color1);
}

.jp-StatusBar-GroupItem {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.jp-Statusbar-ProgressCircle svg {
  display: block;
  margin: 0 auto;
  width: 16px;
  height: 24px;
  align-self: normal;
}

.jp-Statusbar-ProgressCircle path {
  fill: var(--jp-inverse-layout-color3);
}

.jp-Statusbar-ProgressBar-progress-bar {
  height: 10px;
  width: 100px;
  border: solid 0.25px var(--jp-brand-color2);
  border-radius: 3px;
  overflow: hidden;
  align-self: center;
}

.jp-Statusbar-ProgressBar-progress-bar > div {
  background-color: var(--jp-brand-color2);
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-size: 40px 40px;
  float: left;
  width: 0%;
  height: 100%;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  text-align: center;
  animation: jp-Statusbar-ExecutionTime-progress-bar 2s linear infinite;
}

.jp-Statusbar-ProgressBar-progress-bar p {
  color: var(--jp-ui-font-color1);
  font-family: var(--jp-ui-font-family);
  font-size: var(--jp-ui-font-size1);
  line-height: 10px;
  width: 100px;
}

@keyframes jp-Statusbar-ExecutionTime-progress-bar {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 40px 40px;
  }
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Variables
|----------------------------------------------------------------------------*/

:root {
  --jp-private-commandpalette-search-height: 28px;
}

/*-----------------------------------------------------------------------------
| Overall styles
|----------------------------------------------------------------------------*/

.lm-CommandPalette {
  padding-bottom: 0;
  color: var(--jp-ui-font-color1);
  background: var(--jp-layout-color1);

  /* This is needed so that all font sizing of children done in ems is
   * relative to this base size */
  font-size: var(--jp-ui-font-size1);
}

/*-----------------------------------------------------------------------------
| Modal variant
|----------------------------------------------------------------------------*/

.jp-ModalCommandPalette {
  position: absolute;
  z-index: 10000;
  top: 38px;
  left: 30%;
  margin: 0;
  padding: 4px;
  width: 40%;
  box-shadow: var(--jp-elevation-z4);
  border-radius: 4px;
  background: var(--jp-layout-color0);
}

.jp-ModalCommandPalette .lm-CommandPalette {
  max-height: 40vh;
}

.jp-ModalCommandPalette .lm-CommandPalette .lm-close-icon::after {
  display: none;
}

.jp-ModalCommandPalette .lm-CommandPalette .lm-CommandPalette-header {
  display: none;
}

.jp-ModalCommandPalette .lm-CommandPalette .lm-CommandPalette-item {
  margin-left: 4px;
  margin-right: 4px;
}

.jp-ModalCommandPalette
  .lm-CommandPalette
  .lm-CommandPalette-item.lm-mod-disabled {
  display: none;
}

/*-----------------------------------------------------------------------------
| Search
|----------------------------------------------------------------------------*/

.lm-CommandPalette-search {
  padding: 4px;
  background-color: var(--jp-layout-color1);
  z-index: 2;
}

.lm-CommandPalette-wrapper {
  overflow: overlay;
  padding: 0 9px;
  background-color: var(--jp-input-active-background);
  height: 30px;
  box-shadow: inset 0 0 0 var(--jp-border-width) var(--jp-input-border-color);
}

.lm-CommandPalette.lm-mod-focused .lm-CommandPalette-wrapper {
  box-shadow: inset 0 0 0 1px var(--jp-input-active-box-shadow-color),
    inset 0 0 0 3px var(--jp-input-active-box-shadow-color);
}

.jp-SearchIconGroup {
  color: white;
  background-color: var(--jp-brand-color1);
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 5px 5px 1px;
}

.jp-SearchIconGroup svg {
  height: 20px;
  width: 20px;
}

.jp-SearchIconGroup .jp-icon3[fill] {
  fill: var(--jp-layout-color0);
}

.lm-CommandPalette-input {
  background: transparent;
  width: calc(100% - 18px);
  float: left;
  border: none;
  outline: none;
  font-size: var(--jp-ui-font-size1);
  color: var(--jp-ui-font-color0);
  line-height: var(--jp-private-commandpalette-search-height);
}

.lm-CommandPalette-input::-webkit-input-placeholder,
.lm-CommandPalette-input::-moz-placeholder,
.lm-CommandPalette-input:-ms-input-placeholder {
  color: var(--jp-ui-font-color2);
  font-size: var(--jp-ui-font-size1);
}

/*-----------------------------------------------------------------------------
| Results
|----------------------------------------------------------------------------*/

.lm-CommandPalette-header:first-child {
  margin-top: 0;
}

.lm-CommandPalette-header {
  border-bottom: solid var(--jp-border-width) var(--jp-border-color2);
  color: var(--jp-ui-font-color1);
  cursor: pointer;
  display: flex;
  font-size: var(--jp-ui-font-size0);
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 8px;
  padding: 8px 0 8px 12px;
  text-transform: uppercase;
}

.lm-CommandPalette-header.lm-mod-active {
  background: var(--jp-layout-color2);
}

.lm-CommandPalette-header > mark {
  background-color: transparent;
  font-weight: bold;
  color: var(--jp-ui-font-color1);
}

.lm-CommandPalette-item {
  padding: 4px 12px 4px 4px;
  color: var(--jp-ui-font-color1);
  font-size: var(--jp-ui-font-size1);
  font-weight: 400;
  display: flex;
}

.lm-CommandPalette-item.lm-mod-disabled {
  color: var(--jp-ui-font-color2);
}

.lm-CommandPalette-item.lm-mod-active {
  color: var(--jp-ui-inverse-font-color1);
  background: var(--jp-brand-color1);
}

.lm-CommandPalette-item.lm-mod-active .lm-CommandPalette-itemLabel > mark {
  color: var(--jp-ui-inverse-font-color0);
}

.lm-CommandPalette-item.lm-mod-active .jp-icon-selectable[fill] {
  fill: var(--jp-layout-color0);
}

.lm-CommandPalette-item.lm-mod-active:hover:not(.lm-mod-disabled) {
  color: var(--jp-ui-inverse-font-color1);
  background: var(--jp-brand-color1);
}

.lm-CommandPalette-item:hover:not(.lm-mod-active):not(.lm-mod-disabled) {
  background: var(--jp-layout-color2);
}

.lm-CommandPalette-itemContent {
  overflow: hidden;
}

.lm-CommandPalette-itemLabel > mark {
  color: var(--jp-ui-font-color0);
  background-color: transparent;
  font-weight: bold;
}

.lm-CommandPalette-item.lm-mod-disabled mark {
  color: var(--jp-ui-font-color2);
}

.lm-CommandPalette-item .lm-CommandPalette-itemIcon {
  margin: 0 4px 0 0;
  position: relative;
  width: 16px;
  top: 2px;
  flex: 0 0 auto;
}

.lm-CommandPalette-item.lm-mod-disabled .lm-CommandPalette-itemIcon {
  opacity: 0.6;
}

.lm-CommandPalette-item .lm-CommandPalette-itemShortcut {
  flex: 0 0 auto;
}

.lm-CommandPalette-itemCaption {
  display: none;
}

.lm-CommandPalette-content {
  background-color: var(--jp-layout-color1);
}

.lm-CommandPalette-content:empty::after {
  content: 'No results';
  margin: auto;
  margin-top: 20px;
  width: 100px;
  display: block;
  font-size: var(--jp-ui-font-size2);
  font-family: var(--jp-ui-font-family);
  font-weight: lighter;
}

.lm-CommandPalette-emptyMessage {
  text-align: center;
  margin-top: 24px;
  line-height: 1.32;
  padding: 0 8px;
  color: var(--jp-content-font-color3);
}

/*-----------------------------------------------------------------------------
| Copyright (c) 2014-2017, Jupyter Development Team.
|
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-Dialog {
  position: absolute;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--jp-dialog-background);
}

.jp-Dialog-content {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  background: var(--jp-layout-color1);
  padding: 24px 24px 12px;
  min-width: 300px;
  min-height: 150px;
  max-width: 1000px;
  max-height: 500px;
  box-sizing: border-box;
  box-shadow: var(--jp-elevation-z20);
  word-wrap: break-word;
  border-radius: var(--jp-border-radius);

  /* This is needed so that all font sizing of children done in ems is
   * relative to this base size */
  font-size: var(--jp-ui-font-size1);
  color: var(--jp-ui-font-color1);
  resize: both;
}

.jp-Dialog-content.jp-Dialog-content-small {
  max-width: 500px;
}

.jp-Dialog-button {
  overflow: visible;
}

button.jp-Dialog-button:focus {
  outline: 1px solid var(--jp-brand-color1);
  outline-offset: 4px;
  -moz-outline-radius: 0;
}

button.jp-Dialog-button:focus::-moz-focus-inner {
  border: 0;
}

button.jp-Dialog-button.jp-mod-styled.jp-mod-accept:focus,
button.jp-Dialog-button.jp-mod-styled.jp-mod-warn:focus,
button.jp-Dialog-button.jp-mod-styled.jp-mod-reject:focus {
  outline-offset: 4px;
  -moz-outline-radius: 0;
}

button.jp-Dialog-button.jp-mod-styled.jp-mod-accept:focus {
  outline: 1px solid var(--jp-accept-color-normal, var(--jp-brand-color1));
}

button.jp-Dialog-button.jp-mod-styled.jp-mod-warn:focus {
  outline: 1px solid var(--jp-warn-color-normal, var(--jp-error-color1));
}

button.jp-Dialog-button.jp-mod-styled.jp-mod-reject:focus {
  outline: 1px solid var(--jp-reject-color-normal, var(--md-grey-600));
}

button.jp-Dialog-close-button {
  padding: 0;
  height: 100%;
  min-width: unset;
  min-height: unset;
}

.jp-Dialog-header {
  display: flex;
  justify-content: space-between;
  flex: 0 0 auto;
  padding-bottom: 12px;
  font-size: var(--jp-ui-font-size3);
  font-weight: 400;
  color: var(--jp-ui-font-color1);
}

.jp-Dialog-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  font-size: var(--jp-ui-font-size1);
  background: var(--jp-layout-color1);
  color: var(--jp-ui-font-color1);
  overflow: auto;
}

.jp-Dialog-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 auto;
  margin-left: -12px;
  margin-right: -12px;
  padding: 12px;
}

.jp-Dialog-checkbox {
  padding-right: 5px;
}

.jp-Dialog-checkbox > input:focus-visible {
  outline: 1px solid var(--jp-input-active-border-color);
  outline-offset: 1px;
}

.jp-Dialog-spacer {
  flex: 1 1 auto;
}

.jp-Dialog-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jp-Dialog-body > .jp-select-wrapper {
  width: 100%;
}

.jp-Dialog-body > button {
  padding: 0 16px;
}

.jp-Dialog-body > label {
  line-height: 1.4;
  color: var(--jp-ui-font-color0);
}

.jp-Dialog-button.jp-mod-styled:not(:last-child) {
  margin-right: 12px;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

.jp-Input-Boolean-Dialog {
  flex-direction: row-reverse;
  align-items: end;
  width: 100%;
}

.jp-Input-Boolean-Dialog > label {
  flex: 1 1 auto;
}

/*-----------------------------------------------------------------------------
| Copyright (c) 2014-2016, Jupyter Development Team.
|
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-MainAreaWidget > :focus {
  outline: none;
}

.jp-MainAreaWidget .jp-MainAreaWidget-error {
  padding: 6px;
}

.jp-MainAreaWidget .jp-MainAreaWidget-error > pre {
  width: auto;
  padding: 10px;
  background: var(--jp-error-color3);
  border: var(--jp-border-width) solid var(--jp-error-color1);
  border-radius: var(--jp-border-radius);
  color: var(--jp-ui-font-color1);
  font-size: var(--jp-ui-font-size1);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

/**
 * google-material-color v1.2.6
 * https://github.com/danlevan/google-material-color
 */
:root {
  --md-red-50: #ffebee;
  --md-red-100: #ffcdd2;
  --md-red-200: #ef9a9a;
  --md-red-300: #e57373;
  --md-red-400: #ef5350;
  --md-red-500: #f44336;
  --md-red-600: #e53935;
  --md-red-700: #d32f2f;
  --md-red-800: #c62828;
  --md-red-900: #b71c1c;
  --md-red-A100: #ff8a80;
  --md-red-A200: #ff5252;
  --md-red-A400: #ff1744;
  --md-red-A700: #d50000;
  --md-pink-50: #fce4ec;
  --md-pink-100: #f8bbd0;
  --md-pink-200: #f48fb1;
  --md-pink-300: #f06292;
  --md-pink-400: #ec407a;
  --md-pink-500: #e91e63;
  --md-pink-600: #d81b60;
  --md-pink-700: #c2185b;
  --md-pink-800: #ad1457;
  --md-pink-900: #880e4f;
  --md-pink-A100: #ff80ab;
  --md-pink-A200: #ff4081;
  --md-pink-A400: #f50057;
  --md-pink-A700: #c51162;
  --md-purple-50: #f3e5f5;
  --md-purple-100: #e1bee7;
  --md-purple-200: #ce93d8;
  --md-purple-300: #ba68c8;
  --md-purple-400: #ab47bc;
  --md-purple-500: #9c27b0;
  --md-purple-600: #8e24aa;
  --md-purple-700: #7b1fa2;
  --md-purple-800: #6a1b9a;
  --md-purple-900: #4a148c;
  --md-purple-A100: #ea80fc;
  --md-purple-A200: #e040fb;
  --md-purple-A400: #d500f9;
  --md-purple-A700: #a0f;
  --md-deep-purple-50: #ede7f6;
  --md-deep-purple-100: #d1c4e9;
  --md-deep-purple-200: #b39ddb;
  --md-deep-purple-300: #9575cd;
  --md-deep-purple-400: #7e57c2;
  --md-deep-purple-500: #673ab7;
  --md-deep-purple-600: #5e35b1;
  --md-deep-purple-700: #512da8;
  --md-deep-purple-800: #4527a0;
  --md-deep-purple-900: #311b92;
  --md-deep-purple-A100: #b388ff;
  --md-deep-purple-A200: #7c4dff;
  --md-deep-purple-A400: #651fff;
  --md-deep-purple-A700: #6200ea;
  --md-indigo-50: #e8eaf6;
  --md-indigo-100: #c5cae9;
  --md-indigo-200: #9fa8da;
  --md-indigo-300: #7986cb;
  --md-indigo-400: #5c6bc0;
  --md-indigo-500: #3f51b5;
  --md-indigo-600: #3949ab;
  --md-indigo-700: #303f9f;
  --md-indigo-800: #283593;
  --md-indigo-900: #1a237e;
  --md-indigo-A100: #8c9eff;
  --md-indigo-A200: #536dfe;
  --md-indigo-A400: #3d5afe;
  --md-indigo-A700: #304ffe;
  --md-blue-50: #e3f2fd;
  --md-blue-100: #bbdefb;
  --md-blue-200: #90caf9;
  --md-blue-300: #64b5f6;
  --md-blue-400: #42a5f5;
  --md-blue-500: #2196f3;
  --md-blue-600: #1e88e5;
  --md-blue-700: #1976d2;
  --md-blue-800: #1565c0;
  --md-blue-900: #0d47a1;
  --md-blue-A100: #82b1ff;
  --md-blue-A200: #448aff;
  --md-blue-A400: #2979ff;
  --md-blue-A700: #2962ff;
  --md-light-blue-50: #e1f5fe;
  --md-light-blue-100: #b3e5fc;
  --md-light-blue-200: #81d4fa;
  --md-light-blue-300: #4fc3f7;
  --md-light-blue-400: #29b6f6;
  --md-light-blue-500: #03a9f4;
  --md-light-blue-600: #039be5;
  --md-light-blue-700: #0288d1;
  --md-light-blue-800: #0277bd;
  --md-light-blue-900: #01579b;
  --md-light-blue-A100: #80d8ff;
  --md-light-blue-A200: #40c4ff;
  --md-light-blue-A400: #00b0ff;
  --md-light-blue-A700: #0091ea;
  --md-cyan-50: #e0f7fa;
  --md-cyan-100: #b2ebf2;
  --md-cyan-200: #80deea;
  --md-cyan-300: #4dd0e1;
  --md-cyan-400: #26c6da;
  --md-cyan-500: #00bcd4;
  --md-cyan-600: #00acc1;
  --md-cyan-700: #0097a7;
  --md-cyan-800: #00838f;
  --md-cyan-900: #006064;
  --md-cyan-A100: #84ffff;
  --md-cyan-A200: #18ffff;
  --md-cyan-A400: #00e5ff;
  --md-cyan-A700: #00b8d4;
  --md-teal-50: #e0f2f1;
  --md-teal-100: #b2dfdb;
  --md-teal-200: #80cbc4;
  --md-teal-300: #4db6ac;
  --md-teal-400: #26a69a;
  --md-teal-500: #009688;
  --md-teal-600: #00897b;
  --md-teal-700: #00796b;
  --md-teal-800: #00695c;
  --md-teal-900: #004d40;
  --md-teal-A100: #a7ffeb;
  --md-teal-A200: #64ffda;
  --md-teal-A400: #1de9b6;
  --md-teal-A700: #00bfa5;
  --md-green-50: #e8f5e9;
  --md-green-100: #c8e6c9;
  --md-green-200: #a5d6a7;
  --md-green-300: #81c784;
  --md-green-400: #66bb6a;
  --md-green-500: #4caf50;
  --md-green-600: #43a047;
  --md-green-700: #388e3c;
  --md-green-800: #2e7d32;
  --md-green-900: #1b5e20;
  --md-green-A100: #b9f6ca;
  --md-green-A200: #69f0ae;
  --md-green-A400: #00e676;
  --md-green-A700: #00c853;
  --md-light-green-50: #f1f8e9;
  --md-light-green-100: #dcedc8;
  --md-light-green-200: #c5e1a5;
  --md-light-green-300: #aed581;
  --md-light-green-400: #9ccc65;
  --md-light-green-500: #8bc34a;
  --md-light-green-600: #7cb342;
  --md-light-green-700: #689f38;
  --md-light-green-800: #558b2f;
  --md-light-green-900: #33691e;
  --md-light-green-A100: #ccff90;
  --md-light-green-A200: #b2ff59;
  --md-light-green-A400: #76ff03;
  --md-light-green-A700: #64dd17;
  --md-lime-50: #f9fbe7;
  --md-lime-100: #f0f4c3;
  --md-lime-200: #e6ee9c;
  --md-lime-300: #dce775;
  --md-lime-400: #d4e157;
  --md-lime-500: #cddc39;
  --md-lime-600: #c0ca33;
  --md-lime-700: #afb42b;
  --md-lime-800: #9e9d24;
  --md-lime-900: #827717;
  --md-lime-A100: #f4ff81;
  --md-lime-A200: #eeff41;
  --md-lime-A400: #c6ff00;
  --md-lime-A700: #aeea00;
  --md-yellow-50: #fffde7;
  --md-yellow-100: #fff9c4;
  --md-yellow-200: #fff59d;
  --md-yellow-300: #fff176;
  --md-yellow-400: #ffee58;
  --md-yellow-500: #ffeb3b;
  --md-yellow-600: #fdd835;
  --md-yellow-700: #fbc02d;
  --md-yellow-800: #f9a825;
  --md-yellow-900: #f57f17;
  --md-yellow-A100: #ffff8d;
  --md-yellow-A200: #ff0;
  --md-yellow-A400: #ffea00;
  --md-yellow-A700: #ffd600;
  --md-amber-50: #fff8e1;
  --md-amber-100: #ffecb3;
  --md-amber-200: #ffe082;
  --md-amber-300: #ffd54f;
  --md-amber-400: #ffca28;
  --md-amber-500: #ffc107;
  --md-amber-600: #ffb300;
  --md-amber-700: #ffa000;
  --md-amber-800: #ff8f00;
  --md-amber-900: #ff6f00;
  --md-amber-A100: #ffe57f;
  --md-amber-A200: #ffd740;
  --md-amber-A400: #ffc400;
  --md-amber-A700: #ffab00;
  --md-orange-50: #fff3e0;
  --md-orange-100: #ffe0b2;
  --md-orange-200: #ffcc80;
  --md-orange-300: #ffb74d;
  --md-orange-400: #ffa726;
  --md-orange-500: #ff9800;
  --md-orange-600: #fb8c00;
  --md-orange-700: #f57c00;
  --md-orange-800: #ef6c00;
  --md-orange-900: #e65100;
  --md-orange-A100: #ffd180;
  --md-orange-A200: #ffab40;
  --md-orange-A400: #ff9100;
  --md-orange-A700: #ff6d00;
  --md-deep-orange-50: #fbe9e7;
  --md-deep-orange-100: #ffccbc;
  --md-deep-orange-200: #ffab91;
  --md-deep-orange-300: #ff8a65;
  --md-deep-orange-400: #ff7043;
  --md-deep-orange-500: #ff5722;
  --md-deep-orange-600: #f4511e;
  --md-deep-orange-700: #e64a19;
  --md-deep-orange-800: #d84315;
  --md-deep-orange-900: #bf360c;
  --md-deep-orange-A100: #ff9e80;
  --md-deep-orange-A200: #ff6e40;
  --md-deep-orange-A400: #ff3d00;
  --md-deep-orange-A700: #dd2c00;
  --md-brown-50: #efebe9;
  --md-brown-100: #d7ccc8;
  --md-brown-200: #bcaaa4;
  --md-brown-300: #a1887f;
  --md-brown-400: #8d6e63;
  --md-brown-500: #795548;
  --md-brown-600: #6d4c41;
  --md-brown-700: #5d4037;
  --md-brown-800: #4e342e;
  --md-brown-900: #3e2723;
  --md-grey-50: #fafafa;
  --md-grey-100: #f5f5f5;
  --md-grey-200: #eee;
  --md-grey-300: #e0e0e0;
  --md-grey-400: #bdbdbd;
  --md-grey-500: #9e9e9e;
  --md-grey-600: #757575;
  --md-grey-700: #616161;
  --md-grey-800: #424242;
  --md-grey-900: #212121;
  --md-blue-grey-50: #eceff1;
  --md-blue-grey-100: #cfd8dc;
  --md-blue-grey-200: #b0bec5;
  --md-blue-grey-300: #90a4ae;
  --md-blue-grey-400: #78909c;
  --md-blue-grey-500: #607d8b;
  --md-blue-grey-600: #546e7a;
  --md-blue-grey-700: #455a64;
  --md-blue-grey-800: #37474f;
  --md-blue-grey-900: #263238;
}

/*-----------------------------------------------------------------------------
| Copyright (c) 2014-2017, Jupyter Development Team.
|
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| RenderedText
|----------------------------------------------------------------------------*/

:root {
  /* This is the padding value to fill the gaps between lines containing spans with background color. */
  --jp-private-code-span-padding: calc(
    (var(--jp-code-line-height) - 1) * var(--jp-code-font-size) / 2
  );
}

.jp-RenderedText {
  text-align: left;
  padding-left: var(--jp-code-padding);
  line-height: var(--jp-code-line-height);
  font-family: var(--jp-code-font-family);
}

.jp-RenderedText pre,
.jp-RenderedJavaScript pre,
.jp-RenderedHTMLCommon pre {
  color: var(--jp-content-font-color1);
  font-size: var(--jp-code-font-size);
  border: none;
  margin: 0;
  padding: 0;
}

.jp-RenderedText pre a:link {
  text-decoration: none;
  color: var(--jp-content-link-color);
}

.jp-RenderedText pre a:hover {
  text-decoration: underline;
  color: var(--jp-content-link-color);
}

.jp-RenderedText pre a:visited {
  text-decoration: none;
  color: var(--jp-content-link-color);
}

/* console foregrounds and backgrounds */
.jp-RenderedText pre .ansi-black-fg {
  color: #3e424d;
}

.jp-RenderedText pre .ansi-red-fg {
  color: #e75c58;
}

.jp-RenderedText pre .ansi-green-fg {
  color: #00a250;
}

.jp-RenderedText pre .ansi-yellow-fg {
  color: #ddb62b;
}

.jp-RenderedText pre .ansi-blue-fg {
  color: #208ffb;
}

.jp-RenderedText pre .ansi-magenta-fg {
  color: #d160c4;
}

.jp-RenderedText pre .ansi-cyan-fg {
  color: #60c6c8;
}

.jp-RenderedText pre .ansi-white-fg {
  color: #c5c1b4;
}

.jp-RenderedText pre .ansi-black-bg {
  background-color: #3e424d;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-red-bg {
  background-color: #e75c58;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-green-bg {
  background-color: #00a250;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-yellow-bg {
  background-color: #ddb62b;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-blue-bg {
  background-color: #208ffb;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-magenta-bg {
  background-color: #d160c4;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-cyan-bg {
  background-color: #60c6c8;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-white-bg {
  background-color: #c5c1b4;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-black-intense-fg {
  color: #282c36;
}

.jp-RenderedText pre .ansi-red-intense-fg {
  color: #b22b31;
}

.jp-RenderedText pre .ansi-green-intense-fg {
  color: #007427;
}

.jp-RenderedText pre .ansi-yellow-intense-fg {
  color: #b27d12;
}

.jp-RenderedText pre .ansi-blue-intense-fg {
  color: #0065ca;
}

.jp-RenderedText pre .ansi-magenta-intense-fg {
  color: #a03196;
}

.jp-RenderedText pre .ansi-cyan-intense-fg {
  color: #258f8f;
}

.jp-RenderedText pre .ansi-white-intense-fg {
  color: #a1a6b2;
}

.jp-RenderedText pre .ansi-black-intense-bg {
  background-color: #282c36;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-red-intense-bg {
  background-color: #b22b31;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-green-intense-bg {
  background-color: #007427;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-yellow-intense-bg {
  background-color: #b27d12;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-blue-intense-bg {
  background-color: #0065ca;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-magenta-intense-bg {
  background-color: #a03196;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-cyan-intense-bg {
  background-color: #258f8f;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-white-intense-bg {
  background-color: #a1a6b2;
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-default-inverse-fg {
  color: var(--jp-ui-inverse-font-color0);
}

.jp-RenderedText pre .ansi-default-inverse-bg {
  background-color: var(--jp-inverse-layout-color0);
  padding: var(--jp-private-code-span-padding) 0;
}

.jp-RenderedText pre .ansi-bold {
  font-weight: bold;
}

.jp-RenderedText pre .ansi-underline {
  text-decoration: underline;
}

.jp-RenderedText[data-mime-type='application/vnd.jupyter.stderr'] {
  background: var(--jp-rendermime-error-background);
  padding-top: var(--jp-code-padding);
}

/*-----------------------------------------------------------------------------
| RenderedLatex
|----------------------------------------------------------------------------*/

.jp-RenderedLatex {
  color: var(--jp-content-font-color1);
  font-size: var(--jp-content-font-size1);
  line-height: var(--jp-content-line-height);
}

/* Left-justify outputs.*/
.jp-OutputArea-output.jp-RenderedLatex {
  padding: var(--jp-code-padding);
  text-align: left;
}

/*-----------------------------------------------------------------------------
| RenderedHTML
|----------------------------------------------------------------------------*/

.jp-RenderedHTMLCommon {
  color: var(--jp-content-font-color1);
  font-family: var(--jp-content-font-family);
  font-size: var(--jp-content-font-size1);
  line-height: var(--jp-content-line-height);

  /* Give a bit more R padding on Markdown text to keep line lengths reasonable */
  padding-right: 20px;
}

.jp-RenderedHTMLCommon em {
  font-style: italic;
}

.jp-RenderedHTMLCommon strong {
  font-weight: bold;
}

.jp-RenderedHTMLCommon u {
  text-decoration: underline;
}

.jp-RenderedHTMLCommon a:link {
  text-decoration: none;
  color: var(--jp-content-link-color);
}

.jp-RenderedHTMLCommon a:hover {
  text-decoration: underline;
  color: var(--jp-content-link-color);
}

.jp-RenderedHTMLCommon a:visited {
  text-decoration: none;
  color: var(--jp-content-link-color);
}

/* Headings */

.jp-RenderedHTMLCommon h1,
.jp-RenderedHTMLCommon h2,
.jp-RenderedHTMLCommon h3,
.jp-RenderedHTMLCommon h4,
.jp-RenderedHTMLCommon h5,
.jp-RenderedHTMLCommon h6 {
  line-height: var(--jp-content-heading-line-height);
  font-weight: var(--jp-content-heading-font-weight);
  font-style: normal;
  margin: var(--jp-content-heading-margin-top) 0
    var(--jp-content-heading-margin-bottom) 0;
}

.jp-RenderedHTMLCommon h1:first-child,
.jp-RenderedHTMLCommon h2:first-child,
.jp-RenderedHTMLCommon h3:first-child,
.jp-RenderedHTMLCommon h4:first-child,
.jp-RenderedHTMLCommon h5:first-child,
.jp-RenderedHTMLCommon h6:first-child {
  margin-top: calc(0.5 * var(--jp-content-heading-margin-top));
}

.jp-RenderedHTMLCommon h1:last-child,
.jp-RenderedHTMLCommon h2:last-child,
.jp-RenderedHTMLCommon h3:last-child,
.jp-RenderedHTMLCommon h4:last-child,
.jp-RenderedHTMLCommon h5:last-child,
.jp-RenderedHTMLCommon h6:last-child {
  margin-bottom: calc(0.5 * var(--jp-content-heading-margin-bottom));
}

.jp-RenderedHTMLCommon h1 {
  font-size: var(--jp-content-font-size5);
}

.jp-RenderedHTMLCommon h2 {
  font-size: var(--jp-content-font-size4);
}

.jp-RenderedHTMLCommon h3 {
  font-size: var(--jp-content-font-size3);
}

.jp-RenderedHTMLCommon h4 {
  font-size: var(--jp-content-font-size2);
}

.jp-RenderedHTMLCommon h5 {
  font-size: var(--jp-content-font-size1);
}

.jp-RenderedHTMLCommon h6 {
  font-size: var(--jp-content-font-size0);
}

/* Lists */

/* stylelint-disable selector-max-type, selector-max-compound-selectors */

.jp-RenderedHTMLCommon ul:not(.list-inline),
.jp-RenderedHTMLCommon ol:not(.list-inline) {
  padding-left: 2em;
}

.jp-RenderedHTMLCommon ul {
  list-style: disc;
}

.jp-RenderedHTMLCommon ul ul {
  list-style: square;
}

.jp-RenderedHTMLCommon ul ul ul {
  list-style: circle;
}

.jp-RenderedHTMLCommon ol {
  list-style: decimal;
}

.jp-RenderedHTMLCommon ol ol {
  list-style: upper-alpha;
}

.jp-RenderedHTMLCommon ol ol ol {
  list-style: lower-alpha;
}

.jp-RenderedHTMLCommon ol ol ol ol {
  list-style: lower-roman;
}

.jp-RenderedHTMLCommon ol ol ol ol ol {
  list-style: decimal;
}

.jp-RenderedHTMLCommon ol,
.jp-RenderedHTMLCommon ul {
  margin-bottom: 1em;
}

.jp-RenderedHTMLCommon ul ul,
.jp-RenderedHTMLCommon ul ol,
.jp-RenderedHTMLCommon ol ul,
.jp-RenderedHTMLCommon ol ol {
  margin-bottom: 0;
}

/* stylelint-enable selector-max-type, selector-max-compound-selectors */

.jp-RenderedHTMLCommon hr {
  color: var(--jp-border-color2);
  background-color: var(--jp-border-color1);
  margin-top: 1em;
  margin-bottom: 1em;
}

.jp-RenderedHTMLCommon > pre {
  margin: 1.5em 2em;
}

.jp-RenderedHTMLCommon pre,
.jp-RenderedHTMLCommon code {
  border: 0;
  background-color: var(--jp-layout-color0);
  color: var(--jp-content-font-color1);
  font-family: var(--jp-code-font-family);
  font-size: inherit;
  line-height: var(--jp-code-line-height);
  padding: 0;
  white-space: pre-wrap;
}

.jp-RenderedHTMLCommon :not(pre) > code {
  background-color: var(--jp-layout-color2);
  padding: 1px 5px;
}

/* Tables */

.jp-RenderedHTMLCommon table {
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
  color: var(--jp-ui-font-color1);
  font-size: var(--jp-ui-font-size1);
  table-layout: fixed;
  margin-left: auto;
  margin-bottom: 1em;
  margin-right: auto;
}

.jp-RenderedHTMLCommon thead {
  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
  vertical-align: bottom;
}

.jp-RenderedHTMLCommon td,
.jp-RenderedHTMLCommon th,
.jp-RenderedHTMLCommon tr {
  vertical-align: middle;
  padding: 0.5em;
  line-height: normal;
  white-space: normal;
  max-width: none;
  border: none;
}

.jp-RenderedMarkdown.jp-RenderedHTMLCommon td,
.jp-RenderedMarkdown.jp-RenderedHTMLCommon th {
  max-width: none;
}

:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon td,
:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon th,
:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon tr {
  text-align: right;
}

.jp-RenderedHTMLCommon th {
  font-weight: bold;
}

.jp-RenderedHTMLCommon tbody tr:nth-child(odd) {
  background: var(--jp-layout-color0);
}

.jp-RenderedHTMLCommon tbody tr:nth-child(even) {
  background: var(--jp-rendermime-table-row-background);
}

.jp-RenderedHTMLCommon tbody tr:hover {
  background: var(--jp-rendermime-table-row-hover-background);
}

.jp-RenderedHTMLCommon p {
  text-align: left;
  margin: 0;
  margin-bottom: 1em;
}

.jp-RenderedHTMLCommon img {
  -moz-force-broken-image-icon: 1;
}

/* Restrict to direct children as other images could be nested in other content. */
.jp-RenderedHTMLCommon > img {
  display: block;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1em;
}

/* Change color behind transparent images if they need it... */
[data-jp-theme-light='false'] .jp-RenderedImage img.jp-needs-light-background {
  background-color: var(--jp-inverse-layout-color1);
}

[data-jp-theme-light='true'] .jp-RenderedImage img.jp-needs-dark-background {
  background-color: var(--jp-inverse-layout-color1);
}

.jp-RenderedHTMLCommon img,
.jp-RenderedImage img,
.jp-RenderedHTMLCommon svg,
.jp-RenderedSVG svg {
  max-width: 100%;
  height: auto;
}

.jp-RenderedHTMLCommon img.jp-mod-unconfined,
.jp-RenderedImage img.jp-mod-unconfined,
.jp-RenderedHTMLCommon svg.jp-mod-unconfined,
.jp-RenderedSVG svg.jp-mod-unconfined {
  max-width: none;
}

.jp-RenderedHTMLCommon .alert {
  padding: var(--jp-notebook-padding);
  border: var(--jp-border-width) solid transparent;
  border-radius: var(--jp-border-radius);
  margin-bottom: 1em;
}

.jp-RenderedHTMLCommon .alert-info {
  color: var(--jp-info-color0);
  background-color: var(--jp-info-color3);
  border-color: var(--jp-info-color2);
}

.jp-RenderedHTMLCommon .alert-info hr {
  border-color: var(--jp-info-color3);
}

.jp-RenderedHTMLCommon .alert-info > p:last-child,
.jp-RenderedHTMLCommon .alert-info > ul:last-child {
  margin-bottom: 0;
}

.jp-RenderedHTMLCommon .alert-warning {
  color: var(--jp-warn-color0);
  background-color: var(--jp-warn-color3);
  border-color: var(--jp-warn-color2);
}

.jp-RenderedHTMLCommon .alert-warning hr {
  border-color: var(--jp-warn-color3);
}

.jp-RenderedHTMLCommon .alert-warning > p:last-child,
.jp-RenderedHTMLCommon .alert-warning > ul:last-child {
  margin-bottom: 0;
}

.jp-RenderedHTMLCommon .alert-success {
  color: var(--jp-success-color0);
  background-color: var(--jp-success-color3);
  border-color: var(--jp-success-color2);
}

.jp-RenderedHTMLCommon .alert-success hr {
  border-color: var(--jp-success-color3);
}

.jp-RenderedHTMLCommon .alert-success > p:last-child,
.jp-RenderedHTMLCommon .alert-success > ul:last-child {
  margin-bottom: 0;
}

.jp-RenderedHTMLCommon .alert-danger {
  color: var(--jp-error-color0);
  background-color: var(--jp-error-color3);
  border-color: var(--jp-error-color2);
}

.jp-RenderedHTMLCommon .alert-danger hr {
  border-color: var(--jp-error-color3);
}

.jp-RenderedHTMLCommon .alert-danger > p:last-child,
.jp-RenderedHTMLCommon .alert-danger > ul:last-child {
  margin-bottom: 0;
}

.jp-RenderedHTMLCommon blockquote {
  margin: 1em 2em;
  padding: 0 1em;
  border-left: 5px solid var(--jp-border-color2);
}

a.jp-InternalAnchorLink {
  visibility: hidden;
  margin-left: 8px;
  color: var(--md-blue-800);
}

h1:hover .jp-InternalAnchorLink,
h2:hover .jp-InternalAnchorLink,
h3:hover .jp-InternalAnchorLink,
h4:hover .jp-InternalAnchorLink,
h5:hover .jp-InternalAnchorLink,
h6:hover .jp-InternalAnchorLink {
  visibility: visible;
}

.jp-RenderedHTMLCommon kbd {
  background-color: var(--jp-rendermime-table-row-background);
  border: 1px solid var(--jp-border-color0);
  border-bottom-color: var(--jp-border-color2);
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  display: inline-block;
  font-size: var(--jp-ui-font-size0);
  line-height: 1em;
  padding: 0.2em 0.5em;
}

/* Most direct children of .jp-RenderedHTMLCommon have a margin-bottom of 1.0.
 * At the bottom of cells this is a bit too much as there is also spacing
 * between cells. Going all the way to 0 gets too tight between markdown and
 * code cells.
 */
.jp-RenderedHTMLCommon > *:last-child {
  margin-bottom: 0.5em;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Copyright (c) 2014-2017, PhosphorJS Contributors
|
| Distributed under the terms of the BSD 3-Clause License.
|
| The full license is in the file LICENSE, distributed with this software.
|----------------------------------------------------------------------------*/

.lm-cursor-backdrop {
  position: fixed;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  will-change: transform;
  z-index: 100;
}

.lm-mod-drag-image {
  will-change: transform;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

.jp-lineFormSearch {
  padding: 4px 12px;
  background-color: var(--jp-layout-color2);
  box-shadow: var(--jp-toolbar-box-shadow);
  z-index: 2;
  font-size: var(--jp-ui-font-size1);
}

.jp-lineFormCaption {
  font-size: var(--jp-ui-font-size0);
  line-height: var(--jp-ui-font-size1);
  margin-top: 4px;
  color: var(--jp-ui-font-color0);
}

.jp-baseLineForm {
  border: none;
  border-radius: 0;
  position: absolute;
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
  outline: none;
}

.jp-lineFormButtonContainer {
  top: 4px;
  right: 8px;
  height: 24px;
  padding: 0 12px;
  width: 12px;
}

.jp-lineFormButtonIcon {
  top: 0;
  right: 0;
  background-color: var(--jp-brand-color1);
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
}

.jp-lineFormButton {
  top: 0;
  right: 0;
  background-color: transparent;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.jp-lineFormWrapper {
  overflow: hidden;
  padding: 0 8px;
  border: 1px solid var(--jp-border-color0);
  background-color: var(--jp-input-active-background);
  height: 22px;
}

.jp-lineFormWrapperFocusWithin {
  border: var(--jp-border-width) solid var(--md-blue-500);
  box-shadow: inset 0 0 4px var(--md-blue-300);
}

.jp-lineFormInput {
  background: transparent;
  width: 200px;
  height: 100%;
  border: none;
  outline: none;
  color: var(--jp-ui-font-color0);
  line-height: 28px;
}

/*-----------------------------------------------------------------------------
| Copyright (c) 2014-2016, Jupyter Development Team.
|
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-JSONEditor {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.jp-JSONEditor-host {
  flex: 1 1 auto;
  border: var(--jp-border-width) solid var(--jp-input-border-color);
  border-radius: 0;
  background: var(--jp-layout-color0);
  min-height: 50px;
  padding: 1px;
}

.jp-JSONEditor.jp-mod-error .jp-JSONEditor-host {
  border-color: red;
  outline-color: red;
}

.jp-JSONEditor-header {
  display: flex;
  flex: 1 0 auto;
  padding: 0 0 0 12px;
}

.jp-JSONEditor-header label {
  flex: 0 0 auto;
}

.jp-JSONEditor-commitButton {
  height: 16px;
  width: 16px;
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
}

.jp-JSONEditor-host.jp-mod-focused {
  background-color: var(--jp-input-active-background);
  border: 1px solid var(--jp-input-active-border-color);
  box-shadow: var(--jp-input-box-shadow);
}

.jp-Editor.jp-mod-dropTarget {
  border: var(--jp-border-width) solid var(--jp-input-active-border-color);
  box-shadow: var(--jp-input-box-shadow);
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/
.jp-DocumentSearch-input {
  border: none;
  outline: none;
  color: var(--jp-ui-font-color0);
  font-size: var(--jp-ui-font-size1);
  background-color: var(--jp-layout-color0);
  font-family: var(--jp-ui-font-family);
  padding: 2px 1px;
  resize: none;
}

.jp-DocumentSearch-overlay {
  position: absolute;
  background-color: var(--jp-toolbar-background);
  border-bottom: var(--jp-border-width) solid var(--jp-toolbar-border-color);
  border-left: var(--jp-border-width) solid var(--jp-toolbar-border-color);
  top: 0;
  right: 0;
  z-index: 7;
  min-width: 405px;
  padding: 2px;
  font-size: var(--jp-ui-font-size1);

  --jp-private-document-search-button-height: 20px;
}

.jp-DocumentSearch-overlay button {
  background-color: var(--jp-toolbar-background);
  outline: 0;
}

.jp-DocumentSearch-overlay button:hover {
  background-color: var(--jp-layout-color2);
}

.jp-DocumentSearch-overlay button:active {
  background-color: var(--jp-layout-color3);
}

.jp-DocumentSearch-overlay-row {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.jp-DocumentSearch-button-content {
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.jp-DocumentSearch-button-content svg {
  width: 100%;
  height: 100%;
}

.jp-DocumentSearch-input-wrapper {
  border: var(--jp-border-width) solid var(--jp-border-color0);
  display: flex;
  background-color: var(--jp-layout-color0);
  margin: 2px;
}

.jp-DocumentSearch-input-wrapper:focus-within {
  border-color: var(--jp-cell-editor-active-border-color);
}

.jp-DocumentSearch-toggle-wrapper,
.jp-DocumentSearch-button-wrapper {
  all: initial;
  overflow: hidden;
  display: inline-block;
  border: none;
  box-sizing: border-box;
}

.jp-DocumentSearch-toggle-wrapper {
  width: 14px;
  height: 14px;
}

.jp-DocumentSearch-button-wrapper {
  width: var(--jp-private-document-search-button-height);
  height: var(--jp-private-document-search-button-height);
}

.jp-DocumentSearch-toggle-wrapper:focus,
.jp-DocumentSearch-button-wrapper:focus {
  outline: var(--jp-border-width) solid
    var(--jp-cell-editor-active-border-color);
  outline-offset: -1px;
}

.jp-DocumentSearch-toggle-wrapper,
.jp-DocumentSearch-button-wrapper,
.jp-DocumentSearch-button-content:focus {
  outline: none;
}

.jp-DocumentSearch-toggle-placeholder {
  width: 5px;
}

.jp-DocumentSearch-input-button::before {
  display: block;
  padding-top: 100%;
}

.jp-DocumentSearch-input-button-off {
  opacity: var(--jp-search-toggle-off-opacity);
}

.jp-DocumentSearch-input-button-off:hover {
  opacity: var(--jp-search-toggle-hover-opacity);
}

.jp-DocumentSearch-input-button-on {
  opacity: var(--jp-search-toggle-on-opacity);
}

.jp-DocumentSearch-index-counter {
  padding-left: 10px;
  padding-right: 10px;
  user-select: none;
  min-width: 35px;
  display: inline-block;
}

.jp-DocumentSearch-up-down-wrapper {
  display: inline-block;
  padding-right: 2px;
  margin-left: auto;
  white-space: nowrap;
}

.jp-DocumentSearch-spacer {
  margin-left: auto;
}

.jp-DocumentSearch-up-down-wrapper button {
  outline: 0;
  border: none;
  width: var(--jp-private-document-search-button-height);
  height: var(--jp-private-document-search-button-height);
  vertical-align: middle;
  margin: 1px 5px 2px;
}

.jp-DocumentSearch-up-down-button:hover {
  background-color: var(--jp-layout-color2);
}

.jp-DocumentSearch-up-down-button:active {
  background-color: var(--jp-layout-color3);
}

.jp-DocumentSearch-filter-button {
  border-radius: var(--jp-border-radius);
}

.jp-DocumentSearch-filter-button:hover {
  background-color: var(--jp-layout-color2);
}

.jp-DocumentSearch-filter-button-enabled {
  background-color: var(--jp-layout-color2);
}

.jp-DocumentSearch-filter-button-enabled:hover {
  background-color: var(--jp-layout-color3);
}

.jp-DocumentSearch-search-options {
  padding: 0 8px;
  margin-left: 3px;
  width: 100%;
  display: grid;
  justify-content: start;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: stretch;
}

.jp-DocumentSearch-search-filter-disabled {
  color: var(--jp-ui-font-color2);
}

.jp-DocumentSearch-search-filter {
  display: flex;
  align-items: center;
  user-select: none;
}

.jp-DocumentSearch-regex-error {
  color: var(--jp-error-color0);
}

.jp-DocumentSearch-replace-button-wrapper {
  overflow: hidden;
  display: inline-block;
  box-sizing: border-box;
  border: var(--jp-border-width) solid var(--jp-border-color0);
  margin: auto 2px;
  padding: 1px 4px;
  height: calc(var(--jp-private-document-search-button-height) + 2px);
}

.jp-DocumentSearch-replace-button-wrapper:focus {
  border: var(--jp-border-width) solid var(--jp-cell-editor-active-border-color);
}

.jp-DocumentSearch-replace-button {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  color: var(--jp-ui-font-color1);

  /* height - 2 * (padding of wrapper) */
  line-height: calc(var(--jp-private-document-search-button-height) - 2px);
  width: 100%;
  height: 100%;
}

.jp-DocumentSearch-replace-button:focus {
  outline: none;
}

.jp-DocumentSearch-replace-wrapper-class {
  margin-left: 14px;
  display: flex;
}

.jp-DocumentSearch-replace-toggle {
  border: none;
  background-color: var(--jp-toolbar-background);
  border-radius: var(--jp-border-radius);
}

.jp-DocumentSearch-replace-toggle:hover {
  background-color: var(--jp-layout-color2);
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.cm-editor {
  line-height: var(--jp-code-line-height);
  font-size: var(--jp-code-font-size);
  font-family: var(--jp-code-font-family);
  border: 0;
  border-radius: 0;
  height: auto;

  /* Changed to auto to autogrow */
}

.cm-editor pre {
  padding: 0 var(--jp-code-padding);
}

.jp-CodeMirrorEditor[data-type='inline'] .cm-dialog {
  background-color: var(--jp-layout-color0);
  color: var(--jp-content-font-color1);
}

.jp-CodeMirrorEditor {
  cursor: text;
}

/* When zoomed out 67% and 33% on a screen of 1440 width x 900 height */
@media screen and (min-width: 2138px) and (max-width: 4319px) {
  .jp-CodeMirrorEditor[data-type='inline'] .cm-cursor {
    border-left: var(--jp-code-cursor-width1) solid
      var(--jp-editor-cursor-color);
  }
}

/* When zoomed out less than 33% */
@media screen and (min-width: 4320px) {
  .jp-CodeMirrorEditor[data-type='inline'] .cm-cursor {
    border-left: var(--jp-code-cursor-width2) solid
      var(--jp-editor-cursor-color);
  }
}

.cm-editor.jp-mod-readOnly .cm-cursor {
  display: none;
}

.jp-CollaboratorCursor {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: none;
  border-bottom: 3px solid;
  background-clip: content-box;
  margin-left: -5px;
  margin-right: -5px;
}

.cm-searching,
.cm-searching span {
  /* `.cm-searching span`: we need to override syntax highlighting */
  background-color: var(--jp-search-unselected-match-background-color);
  color: var(--jp-search-unselected-match-color);
}

.cm-searching::selection,
.cm-searching span::selection {
  background-color: var(--jp-search-unselected-match-background-color);
  color: var(--jp-search-unselected-match-color);
}

.jp-current-match > .cm-searching,
.jp-current-match > .cm-searching span,
.cm-searching > .jp-current-match,
.cm-searching > .jp-current-match span {
  background-color: var(--jp-search-selected-match-background-color);
  color: var(--jp-search-selected-match-color);
}

.jp-current-match > .cm-searching::selection,
.cm-searching > .jp-current-match::selection,
.jp-current-match > .cm-searching span::selection {
  background-color: var(--jp-search-selected-match-background-color);
  color: var(--jp-search-selected-match-color);
}

.cm-trailingspace {
  background-image: url();
  background-position: center left;
  background-repeat: repeat-x;
}

.jp-CollaboratorCursor-hover {
  position: absolute;
  z-index: 1;
  transform: translateX(-50%);
  color: white;
  border-radius: 3px;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 1px;
  padding-bottom: 1px;
  text-align: center;
  font-size: var(--jp-ui-font-size1);
  white-space: nowrap;
}

.jp-CodeMirror-ruler {
  border-left: 1px dashed var(--jp-border-color2);
}

/* Styles for shared cursors (remote cursor locations and selected ranges) */
.jp-CodeMirrorEditor .cm-ySelectionCaret {
  position: relative;
  border-left: 1px solid black;
  margin-left: -1px;
  margin-right: -1px;
  box-sizing: border-box;
}

.jp-CodeMirrorEditor .cm-ySelectionCaret > .cm-ySelectionInfo {
  white-space: nowrap;
  position: absolute;
  top: -1.15em;
  padding-bottom: 0.05em;
  left: -1px;
  font-size: 0.95em;
  font-family: var(--jp-ui-font-family);
  font-weight: bold;
  line-height: normal;
  user-select: none;
  color: white;
  padding-left: 2px;
  padding-right: 2px;
  z-index: 101;
  transition: opacity 0.3s ease-in-out;
}

.jp-CodeMirrorEditor .cm-ySelectionInfo {
  transition-delay: 0.7s;
  opacity: 0;
}

.jp-CodeMirrorEditor .cm-ySelectionCaret:hover > .cm-ySelectionInfo {
  opacity: 1;
  transition-delay: 0s;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-MimeDocument {
  outline: none;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Variables
|----------------------------------------------------------------------------*/

:root {
  --jp-private-filebrowser-button-height: 28px;
  --jp-private-filebrowser-button-width: 48px;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-FileBrowser .jp-SidePanel-content {
  display: flex;
  flex-direction: column;
}

.jp-FileBrowser-toolbar.jp-Toolbar {
  flex-wrap: wrap;
  row-gap: 12px;
  border-bottom: none;
  height: auto;
  margin: 8px 12px 0;
  box-shadow: none;
  padding: 0;
  justify-content: flex-start;
}

.jp-FileBrowser-Panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.jp-BreadCrumbs {
  flex: 0 0 auto;
  margin: 8px 12px;
}

.jp-BreadCrumbs-item {
  margin: 0 2px;
  padding: 0 2px;
  border-radius: var(--jp-border-radius);
  cursor: pointer;
}

.jp-BreadCrumbs-item:hover {
  background-color: var(--jp-layout-color2);
}

.jp-BreadCrumbs-item:first-child {
  margin-left: 0;
}

.jp-BreadCrumbs-item.jp-mod-dropTarget {
  background-color: var(--jp-brand-color2);
  opacity: 0.7;
}

/*-----------------------------------------------------------------------------
| Buttons
|----------------------------------------------------------------------------*/

.jp-FileBrowser-toolbar > .jp-Toolbar-item {
  flex: 0 0 auto;
  padding-left: 0;
  padding-right: 2px;
  align-items: center;
  height: unset;
}

.jp-FileBrowser-toolbar > .jp-Toolbar-item .jp-ToolbarButtonComponent {
  width: 40px;
}

/*-----------------------------------------------------------------------------
| Other styles
|----------------------------------------------------------------------------*/

.jp-FileDialog.jp-mod-conflict input {
  color: var(--jp-error-color1);
}

.jp-FileDialog .jp-new-name-title {
  margin-top: 12px;
}

.jp-LastModified-hidden {
  display: none;
}

.jp-FileSize-hidden {
  display: none;
}

.jp-FileBrowser .lm-AccordionPanel > h3:first-child {
  display: none;
}

/*-----------------------------------------------------------------------------
| DirListing
|----------------------------------------------------------------------------*/

.jp-DirListing {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  outline: 0;
}

.jp-DirListing-header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  border-top: var(--jp-border-width) solid var(--jp-border-color2);
  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
  box-shadow: var(--jp-toolbar-box-shadow);
  z-index: 2;
}

.jp-DirListing-headerItem {
  padding: 4px 12px 2px;
  font-weight: 500;
}

.jp-DirListing-headerItem:hover {
  background: var(--jp-layout-color2);
}

.jp-DirListing-headerItem.jp-id-name {
  flex: 1 0 84px;
}

.jp-DirListing-headerItem.jp-id-modified {
  flex: 0 0 112px;
  border-left: var(--jp-border-width) solid var(--jp-border-color2);
  text-align: right;
}

.jp-DirListing-headerItem.jp-id-filesize {
  flex: 0 0 75px;
  border-left: var(--jp-border-width) solid var(--jp-border-color2);
  text-align: right;
}

.jp-id-narrow {
  display: none;
  flex: 0 0 5px;
  padding: 4px;
  border-left: var(--jp-border-width) solid var(--jp-border-color2);
  text-align: right;
  color: var(--jp-border-color2);
}

.jp-DirListing-narrow .jp-id-narrow {
  display: block;
}

.jp-DirListing-narrow .jp-id-modified,
.jp-DirListing-narrow .jp-DirListing-itemModified {
  display: none;
}

.jp-DirListing-headerItem.jp-mod-selected {
  font-weight: 600;
}

/* increase specificity to override bundled default */
.jp-DirListing-content {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: auto;
  background-color: var(--jp-layout-color1);
}

.jp-DirListing-content mark {
  color: var(--jp-ui-font-color0);
  background-color: transparent;
  font-weight: bold;
}

.jp-DirListing-content .jp-DirListing-item.jp-mod-selected mark {
  color: var(--jp-ui-inverse-font-color0);
}

/* Style the directory listing content when a user drops a file to upload */
.jp-DirListing.jp-mod-native-drop .jp-DirListing-content {
  outline: 5px dashed rgba(128, 128, 128, 0.5);
  outline-offset: -10px;
  cursor: copy;
}

.jp-DirListing-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.jp-DirListing-checkboxWrapper {
  /* Increases hit area of checkbox. */
  padding: 4px;
}

.jp-DirListing-header
  .jp-DirListing-checkboxWrapper
  + .jp-DirListing-headerItem {
  padding-left: 4px;
}

.jp-DirListing-content .jp-DirListing-checkboxWrapper {
  position: relative;
  left: -4px;
  margin: -4px 0 -4px -8px;
}

.jp-DirListing-checkboxWrapper.jp-mod-visible {
  visibility: visible;
}

/* For devices that support hovering, hide checkboxes until hovered, selected...
*/
@media (hover: hover) {
  .jp-DirListing-checkboxWrapper {
    visibility: hidden;
  }

  .jp-DirListing-item:hover .jp-DirListing-checkboxWrapper,
  .jp-DirListing-item.jp-mod-selected .jp-DirListing-checkboxWrapper {
    visibility: visible;
  }
}

.jp-DirListing-item[data-is-dot] {
  opacity: 75%;
}

.jp-DirListing-item.jp-mod-selected {
  color: var(--jp-ui-inverse-font-color1);
  background: var(--jp-brand-color1);
}

.jp-DirListing-item.jp-mod-dropTarget {
  background: var(--jp-brand-color3);
}

.jp-DirListing-item:hover:not(.jp-mod-selected) {
  background: var(--jp-layout-color2);
}

.jp-DirListing-itemIcon {
  flex: 0 0 20px;
  margin-right: 4px;
}

.jp-DirListing-itemText {
  flex: 1 0 64px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.jp-DirListing-itemText:focus {
  outline-width: 2px;
  outline-color: var(--jp-inverse-layout-color1);
  outline-style: solid;
  outline-offset: 1px;
}

.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemText:focus {
  outline-color: var(--jp-layout-color1);
}

.jp-DirListing-itemModified {
  flex: 0 0 125px;
  text-align: right;
}

.jp-DirListing-itemFileSize {
  flex: 0 0 90px;
  text-align: right;
}

.jp-DirListing-editor {
  flex: 1 0 64px;
  outline: none;
  border: none;
  color: var(--jp-ui-font-color1);
  background-color: var(--jp-layout-color1);
}

.jp-DirListing-item.jp-mod-running .jp-DirListing-itemIcon::before {
  color: var(--jp-success-color1);
  content: '\25CF';
  font-size: 8px;
  position: absolute;
  left: -8px;
}

.jp-DirListing-item.jp-mod-running.jp-mod-selected
  .jp-DirListing-itemIcon::before {
  color: var(--jp-ui-inverse-font-color1);
}

.jp-DirListing-item.lm-mod-drag-image,
.jp-DirListing-item.jp-mod-selected.lm-mod-drag-image {
  font-size: var(--jp-ui-font-size1);
  padding-left: 4px;
  margin-left: 4px;
  width: 160px;
  background-color: var(--jp-ui-inverse-font-color2);
  box-shadow: var(--jp-elevation-z2);
  border-radius: 0;
  color: var(--jp-ui-font-color1);
  transform: translateX(-40%) translateY(-58%);
}

.jp-Document {
  min-width: 120px;
  min-height: 120px;
  outline: none;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Main OutputArea
| OutputArea has a list of Outputs
|----------------------------------------------------------------------------*/

.jp-OutputArea {
  overflow-y: auto;
}

.jp-OutputArea-child {
  display: table;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
}

.jp-OutputPrompt {
  width: var(--jp-cell-prompt-width);
  color: var(--jp-cell-outprompt-font-color);
  font-family: var(--jp-cell-prompt-font-family);
  padding: var(--jp-code-padding);
  letter-spacing: var(--jp-cell-prompt-letter-spacing);
  line-height: var(--jp-code-line-height);
  font-size: var(--jp-code-font-size);
  border: var(--jp-border-width) solid transparent;
  opacity: var(--jp-cell-prompt-opacity);

  /* Right align prompt text, don't wrap to handle large prompt numbers */
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Disable text selection */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.jp-OutputArea-prompt {
  display: table-cell;
  vertical-align: top;
}

.jp-OutputArea-output {
  display: table-cell;
  width: 100%;
  height: auto;
  overflow: auto;
  user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}

.jp-OutputArea .jp-RenderedText {
  padding-left: 1ch;
}

/**
 * Prompt overlay.
 */

.jp-OutputArea-promptOverlay {
  position: absolute;
  top: 0;
  width: var(--jp-cell-prompt-width);
  height: 100%;
  opacity: 0.5;
}

.jp-OutputArea-promptOverlay:hover {
  background: var(--jp-layout-color2);
  box-shadow: inset 0 0 1px var(--jp-inverse-layout-color0);
  cursor: zoom-out;
}

.jp-mod-outputsScrolled .jp-OutputArea-promptOverlay:hover {
  cursor: zoom-in;
}

/**
 * Isolated output.
 */
.jp-OutputArea-output.jp-mod-isolated {
  width: 100%;
  display: block;
}

/*
When drag events occur, `lm-mod-override-cursor` is added to the body.
Because iframes steal all cursor events, the following two rules are necessary
to suppress pointer events while resize drags are occurring. There may be a
better solution to this problem.
*/
body.lm-mod-override-cursor .jp-OutputArea-output.jp-mod-isolated {
  position: relative;
}

body.lm-mod-override-cursor .jp-OutputArea-output.jp-mod-isolated::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

/* pre */

.jp-OutputArea-output pre {
  border: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: auto;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* tables */

.jp-OutputArea-output.jp-RenderedHTMLCommon table {
  margin-left: 0;
  margin-right: 0;
}

/* description lists */

.jp-OutputArea-output dl,
.jp-OutputArea-output dt,
.jp-OutputArea-output dd {
  display: block;
}

.jp-OutputArea-output dl {
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.jp-OutputArea-output dt {
  font-weight: bold;
  float: left;
  width: 20%;
  padding: 0;
  margin: 0;
}

.jp-OutputArea-output dd {
  float: left;
  width: 80%;
  padding: 0;
  margin: 0;
}

.jp-TrimmedOutputs pre {
  background: var(--jp-layout-color3);
  font-size: calc(var(--jp-code-font-size) * 1.4);
  text-align: center;
  text-transform: uppercase;
}

/* Hide the gutter in case of
 *  - nested output areas (e.g. in the case of output widgets)
 *  - mirrored output areas
 */
.jp-OutputArea .jp-OutputArea .jp-OutputArea-prompt {
  display: none;
}

/* Hide empty lines in the output area, for instance due to cleared widgets */
.jp-OutputArea-prompt:empty {
  padding: 0;
  border: 0;
}

/*-----------------------------------------------------------------------------
| executeResult is added to any Output-result for the display of the object
| returned by a cell
|----------------------------------------------------------------------------*/

.jp-OutputArea-output.jp-OutputArea-executeResult {
  margin-left: 0;
  width: 100%;
}

/* Text output with the Out[] prompt needs a top padding to match the
 * alignment of the Out[] prompt itself.
 */
.jp-OutputArea-executeResult .jp-RenderedText.jp-OutputArea-output {
  padding-top: var(--jp-code-padding);
  border-top: var(--jp-border-width) solid transparent;
}

/*-----------------------------------------------------------------------------
| The Stdin output
|----------------------------------------------------------------------------*/

.jp-Stdin-prompt {
  color: var(--jp-content-font-color0);
  padding-right: var(--jp-code-padding);
  vertical-align: baseline;
  flex: 0 0 auto;
}

.jp-Stdin-input {
  font-family: var(--jp-code-font-family);
  font-size: inherit;
  color: inherit;
  background-color: inherit;
  width: 42%;
  min-width: 200px;

  /* make sure input baseline aligns with prompt */
  vertical-align: baseline;

  /* padding + margin = 0.5em between prompt and cursor */
  padding: 0 0.25em;
  margin: 0 0.25em;
  flex: 0 0 70%;
}

.jp-Stdin-input::placeholder {
  opacity: 0;
}

.jp-Stdin-input:focus {
  box-shadow: none;
}

.jp-Stdin-input:focus::placeholder {
  opacity: 1;
}

/*-----------------------------------------------------------------------------
| Output Area View
|----------------------------------------------------------------------------*/

.jp-LinkedOutputView .jp-OutputArea {
  height: 100%;
  display: block;
}

.jp-LinkedOutputView .jp-OutputArea-output:only-child {
  height: 100%;
}

/*-----------------------------------------------------------------------------
| Printing
|----------------------------------------------------------------------------*/

@media print {
  .jp-OutputArea-child {
    break-inside: avoid-page;
  }
}

/*-----------------------------------------------------------------------------
| Mobile
|----------------------------------------------------------------------------*/
@media only screen and (max-width: 760px) {
  .jp-OutputPrompt {
    display: table-row;
    text-align: left;
  }

  .jp-OutputArea-child .jp-OutputArea-output {
    display: table-row;
    margin-left: var(--jp-notebook-padding);
  }
}

/* Trimmed outputs warning */
.jp-TrimmedOutputs > a {
  margin: 10px;
  text-decoration: none;
  cursor: pointer;
}

.jp-TrimmedOutputs > a:hover {
  text-decoration: none;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Table of Contents
|----------------------------------------------------------------------------*/

:root {
  --jp-private-toc-active-width: 4px;
}

.jp-TableOfContents {
  display: flex;
  flex-direction: column;
  background: var(--jp-layout-color1);
  color: var(--jp-ui-font-color1);
  font-size: var(--jp-ui-font-size1);
  height: 100%;
}

.jp-TableOfContents-placeholder {
  text-align: center;
}

.jp-TableOfContents-placeholderContent {
  color: var(--jp-content-font-color2);
  padding: 8px;
}

.jp-TableOfContents-placeholderContent > h3 {
  margin-bottom: var(--jp-content-heading-margin-bottom);
}

.jp-TableOfContents .jp-SidePanel-content {
  overflow-y: auto;
}

.jp-TableOfContents-tree {
  margin: 4px;
}

.jp-TableOfContents ol {
  list-style-type: none;
}

/* stylelint-disable-next-line selector-max-type */
.jp-TableOfContents li > ol {
  /* Align left border with triangle icon center */
  padding-left: 11px;
}

.jp-TableOfContents-content {
  /* left margin for the active heading indicator */
  margin: 0 0 0 var(--jp-private-toc-active-width);
  padding: 0;
  background-color: var(--jp-layout-color1);
}

.jp-tocItem {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.jp-tocItem-heading {
  display: flex;
  cursor: pointer;
}

.jp-tocItem-heading:hover {
  background-color: var(--jp-layout-color2);
}

.jp-tocItem-content {
  display: block;
  padding: 4px 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

.jp-tocItem-collapser {
  height: 20px;
  margin: 2px 2px 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.jp-tocItem-collapser:hover {
  background-color: var(--jp-layout-color3);
}

/* Active heading indicator */

.jp-tocItem-heading::before {
  content: ' ';
  background: transparent;
  width: var(--jp-private-toc-active-width);
  height: 24px;
  position: absolute;
  left: 0;
  border-radius: var(--jp-border-radius);
}

.jp-tocItem-heading.jp-tocItem-active::before {
  background-color: var(--jp-brand-color1);
}

.jp-tocItem-heading:hover.jp-tocItem-active::before {
  background: var(--jp-brand-color0);
  opacity: 1;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-Collapser {
  flex: 0 0 var(--jp-cell-collapser-width);
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  background: transparent;
  border-radius: var(--jp-border-radius);
  opacity: 1;
}

.jp-Collapser-child {
  display: block;
  width: 100%;
  box-sizing: border-box;

  /* height: 100% doesn't work because the height of its parent is computed from content */
  position: absolute;
  top: 0;
  bottom: 0;
}

/*-----------------------------------------------------------------------------
| Printing
|----------------------------------------------------------------------------*/

/*
Hiding collapsers in print mode.

Note: input and output wrappers have "display: block" propery in print mode.
*/

@media print {
  .jp-Collapser {
    display: none;
  }
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Header/Footer
|----------------------------------------------------------------------------*/

/* Hidden by zero height by default */
.jp-CellHeader,
.jp-CellFooter {
  height: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  background: transparent;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Input
|----------------------------------------------------------------------------*/

/* All input areas */
.jp-InputArea {
  display: table;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
}

.jp-InputArea-editor {
  display: table-cell;
  overflow: hidden;
  vertical-align: top;

  /* This is the non-active, default styling */
  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
  border-radius: 0;
  background: var(--jp-cell-editor-background);
}

.jp-InputPrompt {
  display: table-cell;
  vertical-align: top;
  width: var(--jp-cell-prompt-width);
  color: var(--jp-cell-inprompt-font-color);
  font-family: var(--jp-cell-prompt-font-family);
  padding: var(--jp-code-padding);
  letter-spacing: var(--jp-cell-prompt-letter-spacing);
  opacity: var(--jp-cell-prompt-opacity);
  line-height: var(--jp-code-line-height);
  font-size: var(--jp-code-font-size);
  border: var(--jp-border-width) solid transparent;

  /* Right align prompt text, don't wrap to handle large prompt numbers */
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Disable text selection */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*-----------------------------------------------------------------------------
| Mobile
|----------------------------------------------------------------------------*/
@media only screen and (max-width: 760px) {
  .jp-InputArea-editor {
    display: table-row;
    margin-left: var(--jp-notebook-padding);
  }

  .jp-InputPrompt {
    display: table-row;
    text-align: left;
  }
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Placeholder
|----------------------------------------------------------------------------*/

.jp-Placeholder {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.jp-Placeholder-prompt {
  display: table-cell;
  box-sizing: border-box;
}

.jp-Placeholder-content {
  display: table-cell;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  box-sizing: border-box;
  cursor: pointer;
}

.jp-Placeholder-contentContainer {
  display: flex;
}

.jp-Placeholder-content:hover,
.jp-InputPlaceholder > .jp-Placeholder-content:hover {
  border-color: var(--jp-layout-color3);
}

.jp-Placeholder-content .jp-MoreHorizIcon {
  width: 32px;
  height: 16px;
  border: 1px solid transparent;
  border-radius: var(--jp-border-radius);
}

.jp-Placeholder-content .jp-MoreHorizIcon:hover {
  border: 1px solid var(--jp-border-color1);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
  background-color: var(--jp-layout-color0);
}

.jp-PlaceholderText {
  white-space: nowrap;
  overflow-x: hidden;
  color: var(--jp-inverse-layout-color3);
  font-family: var(--jp-code-font-family);
}

.jp-InputPlaceholder > .jp-Placeholder-content {
  border-color: var(--jp-cell-editor-border-color);
  background: var(--jp-cell-editor-background);
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Private CSS variables
|----------------------------------------------------------------------------*/

:root {
  --jp-private-cell-scrolling-output-offset: 5px;
}

/*-----------------------------------------------------------------------------
| Cell
|----------------------------------------------------------------------------*/

.jp-Cell {
  padding: var(--jp-cell-padding);
  margin: 0;
  border: none;
  outline: none;
  background: transparent;
}

/*-----------------------------------------------------------------------------
| Common input/output
|----------------------------------------------------------------------------*/

.jp-Cell-inputWrapper,
.jp-Cell-outputWrapper {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 0;

  /* Added to reveal the box-shadow on the input and output collapsers. */
  overflow: visible;
}

/* Only input/output areas inside cells */
.jp-Cell-inputArea,
.jp-Cell-outputArea {
  flex: 1 1 auto;
}

/*-----------------------------------------------------------------------------
| Collapser
|----------------------------------------------------------------------------*/

/* Make the output collapser disappear when there is not output, but do so
 * in a manner that leaves it in the layout and preserves its width.
 */
.jp-Cell.jp-mod-noOutputs .jp-Cell-outputCollapser {
  border: none !important;
  background: transparent !important;
}

.jp-Cell:not(.jp-mod-noOutputs) .jp-Cell-outputCollapser {
  min-height: var(--jp-cell-collapser-min-height);
}

/*-----------------------------------------------------------------------------
| Output
|----------------------------------------------------------------------------*/

/* Put a space between input and output when there IS output */
.jp-Cell:not(.jp-mod-noOutputs) .jp-Cell-outputWrapper {
  margin-top: 5px;
}

.jp-CodeCell.jp-mod-outputsScrolled .jp-Cell-outputArea {
  overflow-y: auto;
  max-height: 24em;
  margin-left: var(--jp-private-cell-scrolling-output-offset);
  resize: vertical;
}

.jp-CodeCell.jp-mod-outputsScrolled .jp-Cell-outputArea[style*='height'] {
  max-height: unset;
}

.jp-CodeCell.jp-mod-outputsScrolled .jp-Cell-outputArea::after {
  content: ' ';
  box-shadow: inset 0 0 6px 2px rgb(0 0 0 / 30%);
  width: 100%;
  height: 100%;
  position: sticky;
  bottom: 0;
  top: 0;
  margin-top: -50%;
  float: left;
  display: block;
  pointer-events: none;
}

.jp-CodeCell.jp-mod-outputsScrolled .jp-OutputArea-child {
  padding-top: 6px;
}

.jp-CodeCell.jp-mod-outputsScrolled .jp-OutputArea-prompt {
  width: calc(
    var(--jp-cell-prompt-width) - var(--jp-private-cell-scrolling-output-offset)
  );
}

.jp-CodeCell.jp-mod-outputsScrolled .jp-OutputArea-promptOverlay {
  left: calc(-1 * var(--jp-private-cell-scrolling-output-offset));
}

/*-----------------------------------------------------------------------------
| CodeCell
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| MarkdownCell
|----------------------------------------------------------------------------*/

.jp-MarkdownOutput {
  display: table-cell;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: var(--jp-code-padding);
}

.jp-MarkdownOutput.jp-RenderedHTMLCommon {
  overflow: auto;
}

/* collapseHeadingButton (show always if hiddenCellsButton is _not_ shown) */
.jp-collapseHeadingButton {
  display: flex;
  min-height: var(--jp-cell-collapser-min-height);
  font-size: var(--jp-code-font-size);
  position: absolute;
  background-color: transparent;
  background-size: 25px;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  background-image: var(--jp-icon-caret-down);
  right: 0;
  top: 0;
  bottom: 0;
}

.jp-collapseHeadingButton.jp-mod-collapsed {
  background-image: var(--jp-icon-caret-right);
}

/*
 set the container font size to match that of content
 so that the nested collapse buttons have the right size
*/
.jp-MarkdownCell .jp-InputPrompt {
  font-size: var(--jp-content-font-size1);
}

/*
  Align collapseHeadingButton with cell top header
  The font sizes are identical to the ones in packages/rendermime/style/base.css
*/
.jp-mod-rendered .jp-collapseHeadingButton[data-heading-level='1'] {
  font-size: var(--jp-content-font-size5);
  background-position-y: calc(0.3 * var(--jp-content-font-size5));
}

.jp-mod-rendered .jp-collapseHeadingButton[data-heading-level='2'] {
  font-size: var(--jp-content-font-size4);
  background-position-y: calc(0.3 * var(--jp-content-font-size4));
}

.jp-mod-rendered .jp-collapseHeadingButton[data-heading-level='3'] {
  font-size: var(--jp-content-font-size3);
  background-position-y: calc(0.3 * var(--jp-content-font-size3));
}

.jp-mod-rendered .jp-collapseHeadingButton[data-heading-level='4'] {
  font-size: var(--jp-content-font-size2);
  background-position-y: calc(0.3 * var(--jp-content-font-size2));
}

.jp-mod-rendered .jp-collapseHeadingButton[data-heading-level='5'] {
  font-size: var(--jp-content-font-size1);
  background-position-y: top;
}

.jp-mod-rendered .jp-collapseHeadingButton[data-heading-level='6'] {
  font-size: var(--jp-content-font-size0);
  background-position-y: top;
}

/* collapseHeadingButton (show only on (hover,active) if hiddenCellsButton is shown) */
.jp-Notebook.jp-mod-showHiddenCellsButton .jp-collapseHeadingButton {
  display: none;
}

.jp-Notebook.jp-mod-showHiddenCellsButton
  :is(.jp-MarkdownCell:hover, .jp-mod-active)
  .jp-collapseHeadingButton {
  display: flex;
}

/* showHiddenCellsButton (only show if jp-mod-showHiddenCellsButton is set, which
is a consequence of the showHiddenCellsButton option in Notebook Settings)*/
.jp-Notebook.jp-mod-showHiddenCellsButton .jp-showHiddenCellsButton {
  margin-left: calc(var(--jp-cell-prompt-width) + 2 * var(--jp-code-padding));
  margin-top: var(--jp-code-padding);
  border: 1px solid var(--jp-border-color2);
  background-color: var(--jp-border-color3) !important;
  color: var(--jp-content-font-color0) !important;
  display: flex;
}

.jp-Notebook.jp-mod-showHiddenCellsButton .jp-showHiddenCellsButton:hover {
  background-color: var(--jp-border-color2) !important;
}

.jp-showHiddenCellsButton {
  display: none;
}

/*-----------------------------------------------------------------------------
| Printing
|----------------------------------------------------------------------------*/

/*
Using block instead of flex to allow the use of the break-inside CSS property for
cell outputs.
*/

@media print {
  .jp-Cell-inputWrapper,
  .jp-Cell-outputWrapper {
    display: block;
  }
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Variables
|----------------------------------------------------------------------------*/

:root {
  --jp-notebook-toolbar-padding: 2px 5px 2px 2px;
}

/*-----------------------------------------------------------------------------

/*-----------------------------------------------------------------------------
| Styles
|----------------------------------------------------------------------------*/

.jp-NotebookPanel-toolbar {
  padding: var(--jp-notebook-toolbar-padding);

  /* disable paint containment from lumino 2.0 default strict CSS containment */
  contain: style size !important;
}

.jp-Toolbar-item.jp-Notebook-toolbarCellType .jp-select-wrapper.jp-mod-focused {
  border: none;
  box-shadow: none;
}

.jp-Notebook-toolbarCellTypeDropdown select {
  height: 24px;
  font-size: var(--jp-ui-font-size1);
  line-height: 14px;
  border-radius: 0;
  display: block;
}

.jp-Notebook-toolbarCellTypeDropdown span {
  top: 5px !important;
}

.jp-Toolbar-responsive-popup {
  position: absolute;
  height: fit-content;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  border-bottom: var(--jp-border-width) solid var(--jp-toolbar-border-color);
  box-shadow: var(--jp-toolbar-box-shadow);
  background: var(--jp-toolbar-background);
  min-height: var(--jp-toolbar-micro-height);
  padding: var(--jp-notebook-toolbar-padding);
  z-index: 1;
  right: 0;
  top: 0;
}

.jp-Toolbar > .jp-Toolbar-responsive-opener {
  margin-left: auto;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Variables
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------

/*-----------------------------------------------------------------------------
| Styles
|----------------------------------------------------------------------------*/

.jp-Notebook-ExecutionIndicator {
  position: relative;
  display: inline-block;
  height: 100%;
  z-index: 9997;
}

.jp-Notebook-ExecutionIndicator-tooltip {
  visibility: hidden;
  height: auto;
  width: max-content;
  width: -moz-max-content;
  background-color: var(--jp-layout-color2);
  color: var(--jp-ui-font-color1);
  text-align: justify;
  border-radius: 6px;
  padding: 0 5px;
  position: fixed;
  display: table;
}

.jp-Notebook-ExecutionIndicator-tooltip.up {
  transform: translateX(-50%) translateY(-100%) translateY(-32px);
}

.jp-Notebook-ExecutionIndicator-tooltip.down {
  transform: translateX(calc(-100% + 16px)) translateY(5px);
}

.jp-Notebook-ExecutionIndicator-tooltip.hidden {
  display: none;
}

.jp-Notebook-ExecutionIndicator:hover .jp-Notebook-ExecutionIndicator-tooltip {
  visibility: visible;
}

.jp-Notebook-ExecutionIndicator span {
  font-size: var(--jp-ui-font-size1);
  font-family: var(--jp-ui-font-family);
  color: var(--jp-ui-font-color1);
  line-height: 24px;
  display: block;
}

.jp-Notebook-ExecutionIndicator-progress-bar {
  display: flex;
  justify-content: center;
  height: 100%;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

/*
 * Execution indicator
 */
.jp-tocItem-content::after {
  content: '';

  /* Must be identical to form a circle */
  width: 12px;
  height: 12px;
  background: none;
  border: none;
  position: absolute;
  right: 0;
}

.jp-tocItem-content[data-running='0']::after {
  border-radius: 50%;
  border: var(--jp-border-width) solid var(--jp-inverse-layout-color3);
  background: none;
}

.jp-tocItem-content[data-running='1']::after {
  border-radius: 50%;
  border: var(--jp-border-width) solid var(--jp-inverse-layout-color3);
  background-color: var(--jp-inverse-layout-color3);
}

.jp-tocItem-content[data-running='0'],
.jp-tocItem-content[data-running='1'] {
  margin-right: 12px;
}

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

.jp-Notebook-footer {
  height: 27px;
  margin-left: calc(
    var(--jp-cell-prompt-width) + var(--jp-cell-collapser-width) +
      var(--jp-cell-padding)
  );
  width: calc(
    100% -
      (
        var(--jp-cell-prompt-width) + var(--jp-cell-collapser-width) +
          var(--jp-cell-padding) + var(--jp-cell-padding)
      )
  );
  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
  color: var(--jp-ui-font-color3);
  margin-top: 6px;
  background: none;
  cursor: pointer;
}

.jp-Notebook-footer:focus {
  border-color: var(--jp-cell-editor-active-border-color);
}

/* For devices that support hovering, hide footer until hover */
@media (hover: hover) {
  .jp-Notebook-footer {
    opacity: 0;
  }

  .jp-Notebook-footer:focus,
  .jp-Notebook-footer:hover {
    opacity: 1;
  }
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Imports
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| CSS variables
|----------------------------------------------------------------------------*/

:root {
  --jp-side-by-side-output-size: 1fr;
  --jp-side-by-side-resized-cell: var(--jp-side-by-side-output-size);
  --jp-private-notebook-dragImage-width: 304px;
  --jp-private-notebook-dragImage-height: 36px;
  --jp-private-notebook-selected-color: var(--md-blue-400);
  --jp-private-notebook-active-color: var(--md-green-400);
}

/*-----------------------------------------------------------------------------
| Notebook
|----------------------------------------------------------------------------*/

/* stylelint-disable selector-max-class */

.jp-NotebookPanel {
  display: block;
  height: 100%;
}

.jp-NotebookPanel.jp-Document {
  min-width: 240px;
  min-height: 120px;
}

.jp-Notebook {
  padding: var(--jp-notebook-padding);
  outline: none;
  overflow: auto;
  background: var(--jp-layout-color0);
}

.jp-Notebook.jp-mod-scrollPastEnd::after {
  display: block;
  content: '';
  min-height: var(--jp-notebook-scroll-padding);
}

.jp-MainAreaWidget-ContainStrict .jp-Notebook * {
  contain: strict;
}

.jp-Notebook .jp-Cell {
  overflow: visible;
}

.jp-Notebook .jp-Cell .jp-InputPrompt {
  cursor: move;
}

/*-----------------------------------------------------------------------------
| Notebook state related styling
|
| The notebook and cells each have states, here are the possibilities:
|
| - Notebook
|   - Command
|   - Edit
| - Cell
|   - None
|   - Active (only one can be active)
|   - Selected (the cells actions are applied to)
|   - Multiselected (when multiple selected, the cursor)
|   - No outputs
|----------------------------------------------------------------------------*/

/* Command or edit modes */

.jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-InputPrompt {
  opacity: var(--jp-cell-prompt-not-active-opacity);
  color: var(--jp-cell-prompt-not-active-font-color);
}

.jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-OutputPrompt {
  opacity: var(--jp-cell-prompt-not-active-opacity);
  color: var(--jp-cell-prompt-not-active-font-color);
}

/* cell is active */
.jp-Notebook .jp-Cell.jp-mod-active .jp-Collapser {
  background: var(--jp-brand-color1);
}

/* cell is dirty */
.jp-Notebook .jp-Cell.jp-mod-dirty .jp-InputPrompt {
  color: var(--jp-warn-color1);
}

.jp-Notebook .jp-Cell.jp-mod-dirty .jp-InputPrompt::before {
  color: var(--jp-warn-color1);
  content: '•';
}

.jp-Notebook .jp-Cell.jp-mod-active.jp-mod-dirty .jp-Collapser {
  background: var(--jp-warn-color1);
}

/* collapser is hovered */
.jp-Notebook .jp-Cell .jp-Collapser:hover {
  box-shadow: var(--jp-elevation-z2);
  background: var(--jp-brand-color1);
  opacity: var(--jp-cell-collapser-not-active-hover-opacity);
}

/* cell is active and collapser is hovered */
.jp-Notebook .jp-Cell.jp-mod-active .jp-Collapser:hover {
  background: var(--jp-brand-color0);
  opacity: 1;
}

/* Command mode */

.jp-Notebook.jp-mod-commandMode .jp-Cell.jp-mod-selected {
  background: var(--jp-notebook-multiselected-color);
}

.jp-Notebook.jp-mod-commandMode
  .jp-Cell.jp-mod-active.jp-mod-selected:not(.jp-mod-multiSelected) {
  background: transparent;
}

/* Edit mode */

.jp-Notebook.jp-mod-editMode .jp-Cell.jp-mod-active .jp-InputArea-editor {
  border: var(--jp-border-width) solid var(--jp-cell-editor-active-border-color);
  box-shadow: var(--jp-input-box-shadow);
  background-color: var(--jp-cell-editor-active-background);
}

/*-----------------------------------------------------------------------------
| Notebook drag and drop
|----------------------------------------------------------------------------*/

.jp-Notebook-cell.jp-mod-dropSource {
  opacity: 0.5;
}

.jp-Notebook-cell.jp-mod-dropTarget,
.jp-Notebook.jp-mod-commandMode
  .jp-Notebook-cell.jp-mod-active.jp-mod-selected.jp-mod-dropTarget {
  border-top-color: var(--jp-private-notebook-selected-color);
  border-top-style: solid;
  border-top-width: 2px;
}

.jp-dragImage {
  display: block;
  flex-direction: row;
  width: var(--jp-private-notebook-dragImage-width);
  height: var(--jp-private-notebook-dragImage-height);
  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
  background: var(--jp-cell-editor-background);
  overflow: visible;
}

.jp-dragImage-singlePrompt {
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.12);
}

.jp-dragImage .jp-dragImage-content {
  flex: 1 1 auto;
  z-index: 2;
  font-size: var(--jp-code-font-size);
  font-family: var(--jp-code-font-family);
  line-height: var(--jp-code-line-height);
  padding: var(--jp-code-padding);
  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
  background: var(--jp-cell-editor-background-color);
  color: var(--jp-content-font-color3);
  text-align: left;
  margin: 4px 4px 4px 0;
}

.jp-dragImage .jp-dragImage-prompt {
  flex: 0 0 auto;
  min-width: 36px;
  color: var(--jp-cell-inprompt-font-color);
  padding: var(--jp-code-padding);
  padding-left: 12px;
  font-family: var(--jp-cell-prompt-font-family);
  letter-spacing: var(--jp-cell-prompt-letter-spacing);
  line-height: 1.9;
  font-size: var(--jp-code-font-size);
  border: var(--jp-border-width) solid transparent;
}

.jp-dragImage-multipleBack {
  z-index: -1;
  position: absolute;
  height: 32px;
  width: 300px;
  top: 8px;
  left: 8px;
  background: var(--jp-layout-color2);
  border: var(--jp-border-width) solid var(--jp-input-border-color);
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.12);
}

/*-----------------------------------------------------------------------------
| Cell toolbar
|----------------------------------------------------------------------------*/

.jp-NotebookTools {
  display: block;
  min-width: var(--jp-sidebar-min-width);
  color: var(--jp-ui-font-color1);
  background: var(--jp-layout-color1);

  /* This is needed so that all font sizing of children done in ems is
    * relative to this base size */
  font-size: var(--jp-ui-font-size1);
  overflow: auto;
}

.jp-ActiveCellTool {
  padding: 12px 0;
  display: flex;
}

.jp-ActiveCellTool-Content {
  flex: 1 1 auto;
}

.jp-ActiveCellTool .jp-ActiveCellTool-CellContent {
  background: var(--jp-cell-editor-background);
  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
  border-radius: 0;
  min-height: 29px;
}

.jp-ActiveCellTool .jp-InputPrompt {
  min-width: calc(var(--jp-cell-prompt-width) * 0.75);
}

.jp-ActiveCellTool-CellContent > pre {
  padding: 5px 4px;
  margin: 0;
  white-space: normal;
}

.jp-MetadataEditorTool {
  flex-direction: column;
  padding: 12px 0;
}

.jp-RankedPanel > :not(:first-child) {
  margin-top: 12px;
}

.jp-KeySelector select.jp-mod-styled {
  font-size: var(--jp-ui-font-size1);
  color: var(--jp-ui-font-color0);
  border: var(--jp-border-width) solid var(--jp-border-color1);
}

.jp-KeySelector label,
.jp-MetadataEditorTool label,
.jp-NumberSetter label {
  line-height: 1.4;
}

.jp-NotebookTools .jp-select-wrapper {
  margin-top: 4px;
  margin-bottom: 0;
}

.jp-NumberSetter input {
  width: 100%;
  margin-top: 4px;
}

.jp-NotebookTools .jp-Collapse {
  margin-top: 16px;
}

/*-----------------------------------------------------------------------------
| Presentation Mode (.jp-mod-presentationMode)
|----------------------------------------------------------------------------*/

.jp-mod-presentationMode .jp-Notebook {
  --jp-content-font-size1: var(--jp-content-presentation-font-size1);
  --jp-code-font-size: var(--jp-code-presentation-font-size);
}

.jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-InputPrompt,
.jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-OutputPrompt {
  flex: 0 0 110px;
}

/*-----------------------------------------------------------------------------
| Side-by-side Mode (.jp-mod-sideBySide)
|----------------------------------------------------------------------------*/
.jp-mod-sideBySide.jp-Notebook .jp-Notebook-cell {
  margin-top: 3em;
  margin-bottom: 3em;
  margin-left: 5%;
  margin-right: 5%;
}

.jp-mod-sideBySide.jp-Notebook .jp-CodeCell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min-content minmax(
      0,
      var(--jp-side-by-side-output-size)
    );
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'header header header'
    'input handle output'
    'footer footer footer';
}

.jp-mod-sideBySide.jp-Notebook .jp-CodeCell.jp-mod-resizedCell {
  grid-template-columns: minmax(0, 1fr) min-content minmax(
      0,
      var(--jp-side-by-side-resized-cell)
    );
}

.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-CellHeader {
  grid-area: header;
}

.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-Cell-inputWrapper {
  grid-area: input;
}

.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-Cell-outputWrapper {
  /* overwrite the default margin (no vertical separation needed in side by side move */
  margin-top: 0;
  grid-area: output;
}

.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-CellFooter {
  grid-area: footer;
}

.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-CellResizeHandle {
  grid-area: handle;
  user-select: none;
  display: block;
  height: 100%;
  cursor: ew-resize;
  padding: 0 var(--jp-cell-padding);
}

.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-CellResizeHandle::after {
  content: '';
  display: block;
  background: var(--jp-border-color2);
  height: 100%;
  width: 5px;
}

.jp-mod-sideBySide.jp-Notebook
  .jp-CodeCell.jp-mod-resizedCell
  .jp-CellResizeHandle::after {
  background: var(--jp-border-color0);
}

.jp-CellResizeHandle {
  display: none;
}

/*-----------------------------------------------------------------------------
| Placeholder
|----------------------------------------------------------------------------*/

.jp-Cell-Placeholder {
  padding-left: 55px;
}

.jp-Cell-Placeholder-wrapper {
  background: #fff;
  border: 1px solid;
  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  margin: 10px 15px;
}

.jp-Cell-Placeholder-wrapper-inner {
  padding: 15px;
  position: relative;
}

.jp-Cell-Placeholder-wrapper-body {
  background-repeat: repeat;
  background-size: 50% auto;
}

.jp-Cell-Placeholder-wrapper-body div {
  background: #f6f7f8;
  background-image: -webkit-linear-gradient(
    left,
    #f6f7f8 0%,
    #edeef1 20%,
    #f6f7f8 40%,
    #f6f7f8 100%
  );
  background-repeat: no-repeat;
  background-size: 800px 104px;
  height: 104px;
  position: absolute;
  right: 15px;
  left: 15px;
  top: 15px;
}

div.jp-Cell-Placeholder-h1 {
  top: 20px;
  height: 20px;
  left: 15px;
  width: 150px;
}

div.jp-Cell-Placeholder-h2 {
  left: 15px;
  top: 50px;
  height: 10px;
  width: 100px;
}

div.jp-Cell-Placeholder-content-1,
div.jp-Cell-Placeholder-content-2,
div.jp-Cell-Placeholder-content-3 {
  left: 15px;
  right: 15px;
  height: 10px;
}

div.jp-Cell-Placeholder-content-1 {
  top: 100px;
}

div.jp-Cell-Placeholder-content-2 {
  top: 120px;
}

div.jp-Cell-Placeholder-content-3 {
  top: 140px;
}

</style>
<style type="text/css">
/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*
The following CSS variables define the main, public API for styling JupyterLab.
These variables should be used by all plugins wherever possible. In other
words, plugins should not define custom colors, sizes, etc unless absolutely
necessary. This enables users to change the visual theme of JupyterLab
by changing these variables.

Many variables appear in an ordered sequence (0,1,2,3). These sequences
are designed to work well together, so for example, `--jp-border-color1` should
be used with `--jp-layout-color1`. The numbers have the following meanings:

* 0: super-primary, reserved for special emphasis
* 1: primary, most important under normal situations
* 2: secondary, next most important under normal situations
* 3: tertiary, next most important under normal situations

Throughout JupyterLab, we are mostly following principles from Google's
Material Design when selecting colors. We are not, however, following
all of MD as it is not optimized for dense, information rich UIs.
*/

:root {
  /* Elevation
   *
   * We style box-shadows using Material Design's idea of elevation. These particular numbers are taken from here:
   *
   * https://github.com/material-components/material-components-web
   * https://material-components-web.appspot.com/elevation.html
   */

  --jp-shadow-base-lightness: 0;
  --jp-shadow-umbra-color: rgba(
    var(--jp-shadow-base-lightness),
    var(--jp-shadow-base-lightness),
    var(--jp-shadow-base-lightness),
    0.2
  );
  --jp-shadow-penumbra-color: rgba(
    var(--jp-shadow-base-lightness),
    var(--jp-shadow-base-lightness),
    var(--jp-shadow-base-lightness),
    0.14
  );
  --jp-shadow-ambient-color: rgba(
    var(--jp-shadow-base-lightness),
    var(--jp-shadow-base-lightness),
    var(--jp-shadow-base-lightness),
    0.12
  );
  --jp-elevation-z0: none;
  --jp-elevation-z1: 0 2px 1px -1px var(--jp-shadow-umbra-color),
    0 1px 1px 0 var(--jp-shadow-penumbra-color),
    0 1px 3px 0 var(--jp-shadow-ambient-color);
  --jp-elevation-z2: 0 3px 1px -2px var(--jp-shadow-umbra-color),
    0 2px 2px 0 var(--jp-shadow-penumbra-color),
    0 1px 5px 0 var(--jp-shadow-ambient-color);
  --jp-elevation-z4: 0 2px 4px -1px var(--jp-shadow-umbra-color),
    0 4px 5px 0 var(--jp-shadow-penumbra-color),
    0 1px 10px 0 var(--jp-shadow-ambient-color);
  --jp-elevation-z6: 0 3px 5px -1px var(--jp-shadow-umbra-color),
    0 6px 10px 0 var(--jp-shadow-penumbra-color),
    0 1px 18px 0 var(--jp-shadow-ambient-color);
  --jp-elevation-z8: 0 5px 5px -3px var(--jp-shadow-umbra-color),
    0 8px 10px 1px var(--jp-shadow-penumbra-color),
    0 3px 14px 2px var(--jp-shadow-ambient-color);
  --jp-elevation-z12: 0 7px 8px -4px var(--jp-shadow-umbra-color),
    0 12px 17px 2px var(--jp-shadow-penumbra-color),
    0 5px 22px 4px var(--jp-shadow-ambient-color);
  --jp-elevation-z16: 0 8px 10px -5px var(--jp-shadow-umbra-color),
    0 16px 24px 2px var(--jp-shadow-penumbra-color),
    0 6px 30px 5px var(--jp-shadow-ambient-color);
  --jp-elevation-z20: 0 10px 13px -6px var(--jp-shadow-umbra-color),
    0 20px 31px 3px var(--jp-shadow-penumbra-color),
    0 8px 38px 7px var(--jp-shadow-ambient-color);
  --jp-elevation-z24: 0 11px 15px -7px var(--jp-shadow-umbra-color),
    0 24px 38px 3px var(--jp-shadow-penumbra-color),
    0 9px 46px 8px var(--jp-shadow-ambient-color);

  /* Borders
   *
   * The following variables, specify the visual styling of borders in JupyterLab.
   */

  --jp-border-width: 1px;
  --jp-border-color0: var(--md-grey-400);
  --jp-border-color1: var(--md-grey-400);
  --jp-border-color2: var(--md-grey-300);
  --jp-border-color3: var(--md-grey-200);
  --jp-inverse-border-color: var(--md-grey-600);
  --jp-border-radius: 2px;

  /* UI Fonts
   *
   * The UI font CSS variables are used for the typography all of the JupyterLab
   * user interface elements that are not directly user generated content.
   *
   * The font sizing here is done assuming that the body font size of --jp-ui-font-size1
   * is applied to a parent element. When children elements, such as headings, are sized
   * in em all things will be computed relative to that body size.
   */

  --jp-ui-font-scale-factor: 1.2;
  --jp-ui-font-size0: 0.83333em;
  --jp-ui-font-size1: 13px; /* Base font size */
  --jp-ui-font-size2: 1.2em;
  --jp-ui-font-size3: 1.44em;
  --jp-ui-font-family: system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI',
    helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';

  /*
   * Use these font colors against the corresponding main layout colors.
   * In a light theme, these go from dark to light.
   */

  /* Defaults use Material Design specification */
  --jp-ui-font-color0: rgba(0, 0, 0, 1);
  --jp-ui-font-color1: rgba(0, 0, 0, 0.87);
  --jp-ui-font-color2: rgba(0, 0, 0, 0.54);
  --jp-ui-font-color3: rgba(0, 0, 0, 0.38);

  /*
   * Use these against the brand/accent/warn/error colors.
   * These will typically go from light to darker, in both a dark and light theme.
   */

  --jp-ui-inverse-font-color0: rgba(255, 255, 255, 1);
  --jp-ui-inverse-font-color1: rgba(255, 255, 255, 1);
  --jp-ui-inverse-font-color2: rgba(255, 255, 255, 0.7);
  --jp-ui-inverse-font-color3: rgba(255, 255, 255, 0.5);

  /* Content Fonts
   *
   * Content font variables are used for typography of user generated content.
   *
   * The font sizing here is done assuming that the body font size of --jp-content-font-size1
   * is applied to a parent element. When children elements, such as headings, are sized
   * in em all things will be computed relative to that body size.
   */

  --jp-content-line-height: 1.6;
  --jp-content-font-scale-factor: 1.2;
  --jp-content-font-size0: 0.83333em;
  --jp-content-font-size1: 14px; /* Base font size */
  --jp-content-font-size2: 1.2em;
  --jp-content-font-size3: 1.44em;
  --jp-content-font-size4: 1.728em;
  --jp-content-font-size5: 2.0736em;

  /* This gives a magnification of about 125% in presentation mode over normal. */
  --jp-content-presentation-font-size1: 17px;
  --jp-content-heading-line-height: 1;
  --jp-content-heading-margin-top: 1.2em;
  --jp-content-heading-margin-bottom: 0.8em;
  --jp-content-heading-font-weight: 500;

  /* Defaults use Material Design specification */
  --jp-content-font-color0: rgba(0, 0, 0, 1);
  --jp-content-font-color1: rgba(0, 0, 0, 0.87);
  --jp-content-font-color2: rgba(0, 0, 0, 0.54);
  --jp-content-font-color3: rgba(0, 0, 0, 0.38);
  --jp-content-link-color: var(--md-blue-900);
  --jp-content-font-family: system-ui, -apple-system, blinkmacsystemfont,
    'Segoe UI', helvetica, arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol';

  /*
   * Code Fonts
   *
   * Code font variables are used for typography of code and other monospaces content.
   */

  --jp-code-font-size: 13px;
  --jp-code-line-height: 1.3077; /* 17px for 13px base */
  --jp-code-padding: 5px; /* 5px for 13px base, codemirror highlighting needs integer px value */
  --jp-code-font-family-default: menlo, consolas, 'DejaVu Sans Mono', monospace;
  --jp-code-font-family: var(--jp-code-font-family-default);

  /* This gives a magnification of about 125% in presentation mode over normal. */
  --jp-code-presentation-font-size: 16px;

  /* may need to tweak cursor width if you change font size */
  --jp-code-cursor-width0: 1.4px;
  --jp-code-cursor-width1: 2px;
  --jp-code-cursor-width2: 4px;

  /* Layout
   *
   * The following are the main layout colors use in JupyterLab. In a light
   * theme these would go from light to dark.
   */

  --jp-layout-color0: white;
  --jp-layout-color1: white;
  --jp-layout-color2: var(--md-grey-200);
  --jp-layout-color3: var(--md-grey-400);
  --jp-layout-color4: var(--md-grey-600);

  /* Inverse Layout
   *
   * The following are the inverse layout colors use in JupyterLab. In a light
   * theme these would go from dark to light.
   */

  --jp-inverse-layout-color0: #111;
  --jp-inverse-layout-color1: var(--md-grey-900);
  --jp-inverse-layout-color2: var(--md-grey-800);
  --jp-inverse-layout-color3: var(--md-grey-700);
  --jp-inverse-layout-color4: var(--md-grey-600);

  /* Brand/accent */

  --jp-brand-color0: var(--md-blue-900);
  --jp-brand-color1: var(--md-blue-700);
  --jp-brand-color2: var(--md-blue-300);
  --jp-brand-color3: var(--md-blue-100);
  --jp-brand-color4: var(--md-blue-50);
  --jp-accent-color0: var(--md-green-900);
  --jp-accent-color1: var(--md-green-700);
  --jp-accent-color2: var(--md-green-300);
  --jp-accent-color3: var(--md-green-100);

  /* State colors (warn, error, success, info) */

  --jp-warn-color0: var(--md-orange-900);
  --jp-warn-color1: var(--md-orange-700);
  --jp-warn-color2: var(--md-orange-300);
  --jp-warn-color3: var(--md-orange-100);
  --jp-error-color0: var(--md-red-900);
  --jp-error-color1: var(--md-red-700);
  --jp-error-color2: var(--md-red-300);
  --jp-error-color3: var(--md-red-100);
  --jp-success-color0: var(--md-green-900);
  --jp-success-color1: var(--md-green-700);
  --jp-success-color2: var(--md-green-300);
  --jp-success-color3: var(--md-green-100);
  --jp-info-color0: var(--md-cyan-900);
  --jp-info-color1: var(--md-cyan-700);
  --jp-info-color2: var(--md-cyan-300);
  --jp-info-color3: var(--md-cyan-100);

  /* Cell specific styles */

  --jp-cell-padding: 5px;
  --jp-cell-collapser-width: 8px;
  --jp-cell-collapser-min-height: 20px;
  --jp-cell-collapser-not-active-hover-opacity: 0.6;
  --jp-cell-editor-background: var(--md-grey-100);
  --jp-cell-editor-border-color: var(--md-grey-300);
  --jp-cell-editor-box-shadow: inset 0 0 2px var(--md-blue-300);
  --jp-cell-editor-active-background: var(--jp-layout-color0);
  --jp-cell-editor-active-border-color: var(--jp-brand-color1);
  --jp-cell-prompt-width: 64px;
  --jp-cell-prompt-font-family: var(--jp-code-font-family-default);
  --jp-cell-prompt-letter-spacing: 0;
  --jp-cell-prompt-opacity: 1;
  --jp-cell-prompt-not-active-opacity: 0.5;
  --jp-cell-prompt-not-active-font-color: var(--md-grey-700);

  /* A custom blend of MD grey and blue 600
   * See https://meyerweb.com/eric/tools/color-blend/#546E7A:1E88E5:5:hex */
  --jp-cell-inprompt-font-color: #307fc1;

  /* A custom blend of MD grey and orange 600
   * https://meyerweb.com/eric/tools/color-blend/#546E7A:F4511E:5:hex */
  --jp-cell-outprompt-font-color: #bf5b3d;

  /* Notebook specific styles */

  --jp-notebook-padding: 10px;
  --jp-notebook-select-background: var(--jp-layout-color1);
  --jp-notebook-multiselected-color: var(--md-blue-50);

  /* The scroll padding is calculated to fill enough space at the bottom of the
  notebook to show one single-line cell (with appropriate padding) at the top
  when the notebook is scrolled all the way to the bottom. We also subtract one
  pixel so that no scrollbar appears if we have just one single-line cell in the
  notebook. This padding is to enable a 'scroll past end' feature in a notebook.
  */
  --jp-notebook-scroll-padding: calc(
    100% - var(--jp-code-font-size) * var(--jp-code-line-height) -
      var(--jp-code-padding) - var(--jp-cell-padding) - 1px
  );

  /* Rendermime styles */

  --jp-rendermime-error-background: #fdd;
  --jp-rendermime-table-row-background: var(--md-grey-100);
  --jp-rendermime-table-row-hover-background: var(--md-light-blue-50);

  /* Dialog specific styles */

  --jp-dialog-background: rgba(0, 0, 0, 0.25);

  /* Console specific styles */

  --jp-console-padding: 10px;

  /* Toolbar specific styles */

  --jp-toolbar-border-color: var(--jp-border-color1);
  --jp-toolbar-micro-height: 8px;
  --jp-toolbar-background: var(--jp-layout-color1);
  --jp-toolbar-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.24);
  --jp-toolbar-header-margin: 4px 4px 0 4px;
  --jp-toolbar-active-background: var(--md-grey-300);

  /* Statusbar specific styles */

  --jp-statusbar-height: 24px;

  /* Input field styles */

  --jp-input-box-shadow: inset 0 0 2px var(--md-blue-300);
  --jp-input-active-background: var(--jp-layout-color1);
  --jp-input-hover-background: var(--jp-layout-color1);
  --jp-input-background: var(--md-grey-100);
  --jp-input-border-color: var(--jp-inverse-border-color);
  --jp-input-active-border-color: var(--jp-brand-color1);
  --jp-input-active-box-shadow-color: rgba(19, 124, 189, 0.3);

  /* General editor styles */

  --jp-editor-selected-background: #d9d9d9;
  --jp-editor-selected-focused-background: #d7d4f0;
  --jp-editor-cursor-color: var(--jp-ui-font-color0);

  /* Code mirror specific styles */

  --jp-mirror-editor-keyword-color: #008000;
  --jp-mirror-editor-atom-color: #88f;
  --jp-mirror-editor-number-color: #080;
  --jp-mirror-editor-def-color: #00f;
  --jp-mirror-editor-variable-color: var(--md-grey-900);
  --jp-mirror-editor-variable-2-color: rgb(0, 54, 109);
  --jp-mirror-editor-variable-3-color: #085;
  --jp-mirror-editor-punctuation-color: #05a;
  --jp-mirror-editor-property-color: #05a;
  --jp-mirror-editor-operator-color: #a2f;
  --jp-mirror-editor-comment-color: #408080;
  --jp-mirror-editor-string-color: #ba2121;
  --jp-mirror-editor-string-2-color: #708;
  --jp-mirror-editor-meta-color: #a2f;
  --jp-mirror-editor-qualifier-color: #555;
  --jp-mirror-editor-builtin-color: #008000;
  --jp-mirror-editor-bracket-color: #997;
  --jp-mirror-editor-tag-color: #170;
  --jp-mirror-editor-attribute-color: #00c;
  --jp-mirror-editor-header-color: blue;
  --jp-mirror-editor-quote-color: #090;
  --jp-mirror-editor-link-color: #00c;
  --jp-mirror-editor-error-color: #f00;
  --jp-mirror-editor-hr-color: #999;

  /*
    RTC user specific colors.
    These colors are used for the cursor, username in the editor,
    and the icon of the user.
  */

  --jp-collaborator-color1: #ffad8e;
  --jp-collaborator-color2: #dac83d;
  --jp-collaborator-color3: #72dd76;
  --jp-collaborator-color4: #00e4d0;
  --jp-collaborator-color5: #45d4ff;
  --jp-collaborator-color6: #e2b1ff;
  --jp-collaborator-color7: #ff9de6;

  /* Vega extension styles */

  --jp-vega-background: white;

  /* Sidebar-related styles */

  --jp-sidebar-min-width: 250px;

  /* Search-related styles */

  --jp-search-toggle-off-opacity: 0.5;
  --jp-search-toggle-hover-opacity: 0.8;
  --jp-search-toggle-on-opacity: 1;
  --jp-search-selected-match-background-color: rgb(245, 200, 0);
  --jp-search-selected-match-color: black;
  --jp-search-unselected-match-background-color: var(
    --jp-inverse-layout-color0
  );
  --jp-search-unselected-match-color: var(--jp-ui-inverse-font-color0);

  /* Icon colors that work well with light or dark backgrounds */
  --jp-icon-contrast-color0: var(--md-purple-600);
  --jp-icon-contrast-color1: var(--md-green-600);
  --jp-icon-contrast-color2: var(--md-pink-600);
  --jp-icon-contrast-color3: var(--md-blue-600);

  /* Button colors */
  --jp-accept-color-normal: var(--md-blue-700);
  --jp-accept-color-hover: var(--md-blue-800);
  --jp-accept-color-active: var(--md-blue-900);
  --jp-warn-color-normal: var(--md-red-700);
  --jp-warn-color-hover: var(--md-red-800);
  --jp-warn-color-active: var(--md-red-900);
  --jp-reject-color-normal: var(--md-grey-600);
  --jp-reject-color-hover: var(--md-grey-700);
  --jp-reject-color-active: var(--md-grey-800);

  /* File or activity icons and switch semantic variables */
  --jp-jupyter-icon-color: #f37626;
  --jp-notebook-icon-color: #f37626;
  --jp-json-icon-color: var(--md-orange-700);
  --jp-console-icon-background-color: var(--md-blue-700);
  --jp-console-icon-color: white;
  --jp-terminal-icon-background-color: var(--md-grey-800);
  --jp-terminal-icon-color: var(--md-grey-200);
  --jp-text-editor-icon-color: var(--md-grey-700);
  --jp-inspector-icon-color: var(--md-grey-700);
  --jp-switch-color: var(--md-grey-400);
  --jp-switch-true-position-color: var(--md-orange-900);
}
</style>
<style type="text/css">
/* Force rendering true colors when outputing to pdf */
* {
  -webkit-print-color-adjust: exact;
}

/* Misc */
a.anchor-link {
  display: none;
}

/* Input area styling */
.jp-InputArea {
  overflow: hidden;
}

.jp-InputArea-editor {
  overflow: hidden;
}

.cm-editor.cm-s-jupyter .highlight pre {
/* weird, but --jp-code-padding defined to be 5px but 4px horizontal padding is hardcoded for pre.cm-line */
  padding: var(--jp-code-padding) 4px;
  margin: 0;

  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;

}

.jp-OutputArea-output pre {
  line-height: inherit;
  font-family: inherit;
}

.jp-RenderedText pre {
  color: var(--jp-content-font-color1);
  font-size: var(--jp-code-font-size);
}

/* Hiding the collapser by default */
.jp-Collapser {
  display: none;
}

@page {
    margin: 0.5in; /* Margin for each printed piece of paper */
}

@media print {
  .jp-Cell-inputWrapper,
  .jp-Cell-outputWrapper {
    display: block;
  }
}
</style>
<!-- Load mathjax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-AMS_CHTML-full,Safe"> </script>
<!-- MathJax configuration -->
<script type="text/x-mathjax-config">
    init_mathjax = function() {
        if (window.MathJax) {
        // MathJax loaded
            MathJax.Hub.Config({
                TeX: {
                    equationNumbers: {
                    autoNumber: "AMS",
                    useLabelIds: true
                    }
                },
                tex2jax: {
                    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                    processEscapes: true,
                    processEnvironments: true
                },
                displayAlign: 'center',
                CommonHTML: {
                    linebreaks: {
                    automatic: true
                    }
                }
            });

            MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
        }
    }
    init_mathjax();
    </script>
<!-- End of mathjax configuration --><script type="module">
  document.addEventListener("DOMContentLoaded", async () => {
    const diagrams = document.querySelectorAll(".jp-Mermaid > pre.mermaid");
    // do not load mermaidjs if not needed
    if (!diagrams.length) {
      return;
    }
    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.6.0/mermaid.esm.min.mjs")).default;
    const parser = new DOMParser();

    mermaid.initialize({
      maxTextSize: 100000,
      startOnLoad: false,
      fontFamily: window
        .getComputedStyle(document.body)
        .getPropertyValue("--jp-ui-font-family"),
      theme: document.querySelector("body[data-jp-theme-light='true']")
        ? "default"
        : "dark",
    });

    let _nextMermaidId = 0;

    function makeMermaidImage(svg) {
      const img = document.createElement("img");
      const doc = parser.parseFromString(svg, "image/svg+xml");
      const svgEl = doc.querySelector("svg");
      const { maxWidth } = svgEl?.style || {};
      const firstTitle = doc.querySelector("title");
      const firstDesc = doc.querySelector("desc");

      img.setAttribute("src", `data:image/svg+xml,${encodeURIComponent(svg)}`);
      if (maxWidth) {
        img.width = parseInt(maxWidth);
      }
      if (firstTitle) {
        img.setAttribute("alt", firstTitle.textContent);
      }
      if (firstDesc) {
        const caption = document.createElement("figcaption");
        caption.className = "sr-only";
        caption.textContent = firstDesc.textContent;
        return [img, caption];
      }
      return [img];
    }

    async function makeMermaidError(text) {
      let errorMessage = "";
      try {
        await mermaid.parse(text);
      } catch (err) {
        errorMessage = `${err}`;
      }

      const result = document.createElement("details");
      result.className = 'jp-RenderedMermaid-Details';
      const summary = document.createElement("summary");
      summary.className = 'jp-RenderedMermaid-Summary';
      const pre = document.createElement("pre");
      const code = document.createElement("code");
      code.innerText = text;
      pre.appendChild(code);
      summary.appendChild(pre);
      result.appendChild(summary);

      const warning = document.createElement("pre");
      warning.innerText = errorMessage;
      result.appendChild(warning);
      return [result];
    }

    async function renderOneMarmaid(src) {
      const id = `jp-mermaid-${_nextMermaidId++}`;
      const parent = src.parentNode;
      let raw = src.textContent.trim();
      const el = document.createElement("div");
      el.style.visibility = "hidden";
      document.body.appendChild(el);
      let results = null;
      let output = null;
      try {
        const { svg } = await mermaid.render(id, raw, el);
        results = makeMermaidImage(svg);
        output = document.createElement("figure");
        results.map(output.appendChild, output);
      } catch (err) {
        parent.classList.add("jp-mod-warning");
        results = await makeMermaidError(raw);
        output = results[0];
      } finally {
        el.remove();
      }
      parent.classList.add("jp-RenderedMermaid");
      parent.appendChild(output);
    }

    void Promise.all([...diagrams].map(renderOneMarmaid));
  });
</script>
<style>
  .jp-Mermaid:not(.jp-RenderedMermaid) {
    display: none;
  }

  .jp-RenderedMermaid {
    overflow: auto;
    display: flex;
  }

  .jp-RenderedMermaid.jp-mod-warning {
    width: auto;
    padding: 0.5em;
    margin-top: 0.5em;
    border: var(--jp-border-width) solid var(--jp-warn-color2);
    border-radius: var(--jp-border-radius);
    color: var(--jp-ui-font-color1);
    font-size: var(--jp-ui-font-size1);
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .jp-RenderedMermaid figure {
    margin: 0;
    overflow: auto;
    max-width: 100%;
  }

  .jp-RenderedMermaid img {
    max-width: 100%;
  }

  .jp-RenderedMermaid-Details > pre {
    margin-top: 1em;
  }

  .jp-RenderedMermaid-Summary {
    color: var(--jp-warn-color2);
  }

  .jp-RenderedMermaid:not(.jp-mod-warning) pre {
    display: none;
  }

  .jp-RenderedMermaid-Summary > pre {
    display: inline-block;
    white-space: normal;
  }
</style>
<!-- End of mermaid configuration --></head>
<body class="jp-Notebook" data-jp-theme-light="true" data-jp-theme-name="JupyterLab Light">
<main><div class="jp-Cell jp-CodeCell jp-Notebook-cell" id="cell-id=3c746ede-3441-499a-913b-c67de2b34fee">
<div class="jp-Cell-inputWrapper" tabindex="0">
<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
</div>
<div class="jp-InputArea jp-Cell-inputArea">
<div class="jp-InputPrompt jp-InputArea-prompt">In [7]:</div>
<div class="jp-CodeMirrorEditor jp-Editor jp-InputArea-editor" data-type="inline">
<div class="cm-editor cm-s-jupyter">
<div class="highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn">requests</span>
<span class="kn">from</span> <span class="nn">bs4</span> <span class="kn">import</span> <span class="n">BeautifulSoup</span>
<span class="c1"># 定义网页获取函数</span>
<span class="kn">import</span> <span class="nn">pandas</span> <span class="k">as</span> <span class="nn">pd</span>
<span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</span>
<span class="n">write</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">ExcelWriter</span><span class="p">(</span><span class="s2">"D:</span><span class="se">\\</span><span class="s2">aa.xlsx"</span><span class="p">)</span>
<span class="k">def</span> <span class="nf">getHtmlText</span><span class="p">(</span><span class="n">url</span><span class="p">,</span><span class="n">user_agent</span><span class="p">):</span> 
    <span class="k">try</span><span class="p">:</span>
        <span class="n">r</span> <span class="o">=</span> <span class="n">requests</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="n">url</span><span class="p">,</span><span class="n">headers</span> <span class="o">=</span> <span class="p">{</span><span class="s1">'User-Agent'</span><span class="p">:</span><span class="n">user_agent</span><span class="p">},</span><span class="n">timeout</span><span class="o">=</span><span class="mi">30</span><span class="p">)</span>
        <span class="n">r</span><span class="o">.</span><span class="n">raise_for_status</span><span class="p">()</span>
        <span class="n">r</span><span class="o">.</span><span class="n">encoding</span> <span class="o">=</span> <span class="s1">'utf-8'</span>
        <span class="k">return</span> <span class="n">r</span><span class="o">.</span><span class="n">text</span>
    <span class="k">except</span><span class="p">:</span>
        <span class="k">return</span> <span class="s2">""</span>
<span class="k">with</span> <span class="nb">open</span><span class="p">(</span><span class="s1">'D:</span><span class="se">\\</span><span class="s1">tian.txt'</span><span class="p">,</span><span class="s1">'r'</span><span class="p">)</span><span class="k">as</span> <span class="n">f</span><span class="p">:</span>
    <span class="k">for</span> <span class="n">cos</span> <span class="ow">in</span> <span class="n">f</span><span class="o">.</span><span class="n">readlines</span><span class="p">():</span> <span class="c1">#依次读取文件中网址</span>
        <span class="nb">print</span><span class="p">(</span><span class="n">cos</span><span class="p">)</span>
        
        <span class="n">user_agent</span> <span class="o">=</span> <span class="s2">"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.188"</span>
        <span class="n">r</span> <span class="o">=</span> <span class="n">getHtmlText</span><span class="p">(</span><span class="n">cos</span><span class="p">,</span><span class="n">user_agent</span><span class="p">)</span>
        <span class="nb">type</span><span class="p">(</span><span class="n">r</span><span class="p">)</span>   
        <span class="nb">print</span><span class="p">(</span><span class="n">r</span><span class="p">)</span>
    <span class="n">soup</span> <span class="o">=</span> <span class="n">BeautifulSoup</span><span class="p">(</span><span class="n">r</span><span class="p">,</span><span class="s1">'html.parser'</span><span class="p">)</span>
    <span class="n">a</span> <span class="o">=</span> <span class="n">soup</span><span class="o">.</span><span class="n">find_all</span><span class="p">(</span><span class="s1">'a'</span><span class="p">)</span>
    <span class="n">b</span> <span class="o">=</span> <span class="n">soup</span><span class="o">.</span><span class="n">find_all</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span><span class="n">class_</span><span class="o">=</span><span class="s2">"container"</span><span class="p">)</span>
    <span class="n">pase1</span><span class="o">=</span><span class="p">[]</span>
    <span class="n">pase2</span><span class="o">=</span><span class="p">[]</span>
    <span class="k">for</span> <span class="n">sal</span> <span class="ow">in</span> <span class="n">a</span><span class="p">:</span>  
           <span class="n">pase1</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">sal</span><span class="o">.</span><span class="n">text</span><span class="p">)</span>
    <span class="k">for</span> <span class="n">item</span> <span class="ow">in</span> <span class="n">b</span><span class="p">:</span>  
           <span class="n">pase2</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">item</span><span class="o">.</span><span class="n">text</span><span class="p">)</span>
           <span class="nb">print</span><span class="p">(</span><span class="n">item</span><span class="o">.</span><span class="n">text</span><span class="p">)</span>
    <span class="n">df</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">(</span><span class="n">pase1</span><span class="p">)</span>
    <span class="n">df</span><span class="o">.</span><span class="n">to_excel</span><span class="p">(</span><span class="n">write</span><span class="p">,</span><span class="n">sheet_name</span> <span class="o">=</span> <span class="s1">'sheet1'</span><span class="p">,</span><span class="n">index</span> <span class="o">=</span> <span class="kc">False</span><span class="p">)</span>
    <span class="n">write</span><span class="o">.</span><span class="n">_save</span><span class="p">()</span>
    <span class="n">df</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">(</span><span class="n">pase2</span><span class="p">)</span>
    <span class="n">df</span><span class="o">.</span><span class="n">to_excel</span><span class="p">(</span><span class="n">write</span><span class="p">,</span><span class="n">sheet_name</span> <span class="o">=</span> <span class="s1">'sheet2'</span><span class="p">,</span><span class="n">index</span> <span class="o">=</span> <span class="kc">False</span><span class="p">)</span>
    <span class="n">write</span><span class="o">.</span><span class="n">_save</span><span class="p">()</span>
</pre></div>
</div>
</div>
</div>
</div>
<div class="jp-Cell-outputWrapper">
<div class="jp-Collapser jp-OutputCollapser jp-Cell-outputCollapser">
</div>
<div class="jp-OutputArea jp-Cell-outputArea">
<div class="jp-OutputArea-child">
<div class="jp-OutputPrompt jp-OutputArea-prompt"></div>
<div class="jp-RenderedText jp-OutputArea-output" data-mime-type="text/plain" tabindex="0">
<pre>http://www.weather.com.cn/

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link rel="dns-prefetch" href="http://i.tq121.com.cn"&gt;
&lt;meta charset="utf-8" /&gt;
&lt;title&gt;非常抱歉，网页无法访问&lt;/title&gt;
&lt;meta  name="keywords" content="天气预报,天气,天气预报查询一周,天气预报15天查询,天气预报查询,北京天气,天气在线,气候,气象" /&gt;
&lt;meta name="description" content="中国天气网官方权威发布天气预报,逐三小时天气预报,提供天气预报查询一周,天气预报15天查询,空气质量,生活指数,旅游出行,交通天气等查询服务" /&gt;
&lt;meta name="msapplication-task" content="name=天气资讯;action-uri=http://news.weather.com.cn/index.shtml;icon-uri=http://www.weather.com.cn/favicon.ico" /&gt;
&lt;meta name="msapplication-task" content="name=生活天气;action-uri=http://www.weather.com.cn/life/index.shtml;icon-uri=http://www.weather.com.cn/favicon.ico" /&gt;
&lt;meta name="msapplication-task" content="name=气象科普;action-uri=http://www.weather.com.cn/science/index.shtml;icon-uri=http://www.weather.com.cn/favicon.ico" /&gt;
&lt;meta name="msapplication-task" content="name=灾害预警;action-uri=http://www.weather.com.cn/alarm/index.shtml;icon-uri=http://www.weather.com.cn/favicon.ico" /&gt;
&lt;meta name="msapplication-task" content="name=旅游天气;action-uri=http://www.weather.com.cn/trip/index.shtml;icon-uri=http://www.weather.com.cn/favicon.ico" /&gt;
&lt;script type="text/javascript"&gt; 
    var t=4;//设定跳转的时间 
    setInterval("refer()",1000); //启动1秒定时 
    function refer(){  
        if(t==0){ 
            location="http://www.weather.com.cn/#404"; //#设定跳转的链接地址 
        } 
        document.getElementById('show').innerHTML=""+t+""; // 显示倒计时 
        t--; // 计数器递减 
        //本文转自： 
    } 
    &lt;/script&gt; 
&lt;style&gt;
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, p, blockquote, th, td, article, aside, summary, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin:0; padding:0 }
article, aside, summary, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0; vertical-align:middle }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ul, ol { list-style:outside none none }
q:before, q:after { content:'' }
abbr, acronym { border:0 }
input, button, select { vertical-align:middle }
.fl { float:left; display:inline }
.fr { float:right; display:inline }
body { background-color:#fff; background-attachment:fixed; background-position:center top; background-repeat:no-repeat; padding:0; margin:0; border:0; font:14px/1.6 "Microsoft Yahei", "Tahoma", "SimSun" }
* { padding:0; margin:0; border:0 }
ul { list-style:none }
a { text-decoration:none; color:#252525 }
a:hover { color:#ee842f }
.clear { clear:both; height:0; overflow:hidden }
nav { display:block }
table { border-collapse:collapse }
h1, h, h3, h4, h5, h6 { font-weight:normal }
.clearfix { zoom:1 }
.clearfix:after { content:"."; display:block; clear:both; visibility:hidden; height:0 }
body { color:#666666; }
i { font-style:normal; }
.nide { width:1000px; margin:0 auto; }
.cuo { width:885px; margin:0 auto 60px; }
.cuo h1 { color:#636060; height:290px; line-height:290px; font-size:40px; font-weight:bold; }
.cuo h1 span { font-weight:bold; padding-right:20px; font-size:100px; }
.cuo p { margin-bottom:20px; font-size:23px; }
.cuo p a { color:#16459a; }
.cuo p a:hover{ color:#ee842f; }
.zuo ul li a img { width:155px; height:120px; }
.zuo { width:1021px; float:left; }
.zuo ul li { float:left; width:155px; text-align:center; height:120px; margin-right:15px; display:inline; }
.zuo ul li a { margin-bottom:10px; display:block; width:155px; }
.zuo ul { width:340px; float:left; }
#search .midBlock { position:relative; z-index:99; width:1000px; margin:0 auto; }
#search { height:64px; margin:16px auto; height:64px; border-bottom:3px solid #ccc; }
#search .midBlock .selCity { position:absolute; width:210px; height:120px; top:0px; left:390px; background-color:#ebebeb; padding:0px 20px 20px 20px; display:none; }
#search .midBlock .selCity p { text-align:left; }
#search .midBlock .selCity p.droplist { line-height:25px; z-index:99; position:relative; }
#search .midBlock .selCity p.title { color:#076EA8; }
#search h1 { display:block; float:left; width:140px; margin-top:15px; margin-right:10px; overflow:hidden; }
body { color:#666666; }
i { font-style:normal; }
.nide { width:1000px; margin:0 auto; }
.cuo { width:885px; margin:0 auto 60px; }
.cuo h1 { color:#636060; height:290px; line-height:290px; font-size:40px; font-weight:bold; }
.cuo h1 span { font-weight:bold; padding-right:20px; font-size:100px; }
.cuo p { margin-bottom:20px; font-size:23px; }
.cuo p a { color:#16459a; }
.zuo ul li a img { width:155px; height:120px; }
.zuo { width:1021px; float:left; }
.zuo ul li { float:left; width:155px; text-align:center; height:120px; margin-right:15px; display:inline; }
.zuo ul li a { margin-bottom:10px; display:block; width:155px; }
.zuo ul { width:340px; float:left; }
#search .midBlock { position:relative; z-index:99; width:1000px; margin:0 auto; }
#search { height:64px; margin:16px auto; height:64px; border-bottom:3px solid #ccc; }
#search .midBlock .selCity { position:absolute; width:210px; height:120px; top:0px; left:390px; background-color:#ebebeb; padding:0px 20px 20px 20px; display:none; }
#search .midBlock .selCity p { text-align:left; }
#search .midBlock .selCity p.droplist { line-height:25px; z-index:99; position:relative; }
#search .midBlock .selCity p.title { color:#076EA8; }
#search h1 { display:block; float:left; width:140px; height:35px; background:url(http://i.tq121.com.cn/i/index/logo_notfound.jpg); margin-top:15px; margin-right:10px; overflow:hidden; }
#search h1 a { display:block; width:140px; height:35px; text-indent:-9999px; }
#txtZip { font-size: 14px; height: 35px; line-height: 35px; padding-left:10px; background:none; color: #6bb0da; margin-top: 2px; text-indent: 4px; width: 285px; }
#btnZip { background: none; cursor: pointer; height: 23px; text-indent: -9999px; width: 42px; }
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="search"&gt;
  &lt;div class="midBlock"&gt;
    &lt;h1&gt; &lt;a title="中国天气网" href="http://www.weather.com.cn"&gt;中国天气&lt;/a&gt; &lt;/h1&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="nide"&gt;
  &lt;div class="cuo"&gt;
    &lt;h1&gt;&lt;span&gt;&lt;i style="color:#dd8d8d;"&gt;4&lt;/i&gt;&lt;i style="color:#84b998"&gt;0&lt;/i&gt;&lt;i style="color:#84adc2;"&gt;4&lt;/i&gt;&lt;/span&gt;您访问的页面不存在&lt;/h1&gt;

    &lt;p&gt;  &lt;span id="show"&gt;5&lt;/span&gt;秒后自动返回 &lt;a href="http://www.weather.com.cn"&gt;中国天气网首页&lt;/a&gt;&lt;/p&gt;   
 &lt;p&gt;或者看看下面的美图吧！&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="zuo"&gt;
&lt;ul&gt;&lt;li&gt;&lt;a href="http://p.weather.com.cn/2024/03/3713111.shtml"  target="_blank" title="北京春和景明 国家植物园春花烂漫"&gt;&lt;img alt="北京春和景明 国家植物园春花烂漫" src="http://pic.weather.com.cn/images/cn/photo/2024/03/25/2024032514475737C20274581AD35C26783DB06BCE7862_s.jpg" target="_blank"&gt;&lt;/a&gt;&lt;a href="http://p.weather.com.cn/2024/03/3713111.shtml"  target="_blank" title="北京春和景明 国家植物园春花烂漫"&gt;北京春和景明 国家植物园春花烂漫&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://p.weather.com.cn/2024/03/3712884.shtml"  target="_blank" title="一场春雨过后 四川眉山东坡文创园樱花满地"&gt;&lt;img alt="一场春雨过后 四川眉山东坡文创园樱花满地" src="http://i.weather.com.cn/images/cn/sjztj/2024/03/25/202403251029371A48D133FC134097A52BE45DD4673F7F_s.jpg" target="_blank"&gt;&lt;/a&gt;&lt;a href="http://p.weather.com.cn/2024/03/3712884.shtml"  target="_blank" title="一场春雨过后 四川眉山东坡文创园樱花满地"&gt;一场春雨过后 四川眉山东坡文创园樱花满地&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;

&lt;ul&gt;&lt;li&gt;&lt;a href="http://p.weather.com.cn/2024/03/3702378.shtml"  target="_blank" title="贵州印江云层波澜起伏 宛如海浪翻涌"&gt;&lt;img alt="贵州印江云层波澜起伏 宛如海浪翻涌" src="http://pic.weather.com.cn/images/cn/photo/2024/03/13/2024031311174635C99E1AE78FE7D7B53AADF51033230F_s.jpg" target="_blank"&gt;&lt;/a&gt;&lt;a href="http://p.weather.com.cn/2024/03/3702378.shtml"  target="_blank" title="贵州印江云层波澜起伏 宛如海浪翻涌"&gt;贵州印江云层波澜起伏 宛如海浪翻涌&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://p.weather.com.cn/2024/03/3700644.shtml"  target="_blank" title="北京今天午后天空现日晕景观 你看到了吗？"&gt;&lt;img alt="北京今天午后天空现日晕景观 你看到了吗？" src="http://pic.weather.com.cn/images/cn/photo/2024/03/10/2024031011553149485FD28C3EB92CA61B7D11C30A1FEC_s.jpg" target="_blank"&gt;&lt;/a&gt;&lt;a href="http://p.weather.com.cn/2024/03/3700644.shtml"  target="_blank" title="北京今天午后天空现日晕景观 你看到了吗？"&gt;北京今天午后天空现日晕景观 你看到了吗？&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;

&lt;ul&gt;&lt;li&gt;&lt;a href="http://p.weather.com.cn/2024/03/3712849.shtml"  target="_blank" title="江西遂川：春茶吐新绿 茶农采茶忙"&gt;&lt;img alt="江西遂川：春茶吐新绿 茶农采茶忙" src="http://pic.weather.com.cn/images/cn/photo/2024/03/25/2024032515204163714BD9E44DBCF308B1892973C1B6BB_s.jpg" target="_blank"&gt;&lt;/a&gt;&lt;a href="http://p.weather.com.cn/2024/03/3712849.shtml"  target="_blank" title="江西遂川：春茶吐新绿 茶农采茶忙"&gt;江西遂川：春茶吐新绿 茶农采茶忙&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://p.weather.com.cn/2024/03/3712142.shtml"  target="_blank" title="广西南宁春耕春种忙 田园大地色令人流连忘返"&gt;&lt;img alt="广西南宁春耕春种忙 田园大地色令人流连忘返" src="http://pic.weather.com.cn/images/cn/photo/2024/03/24/202403241021407BA3C47EA92B22AAA8A7419F2BE02BEE_s.jpg" target="_blank"&gt;&lt;/a&gt;&lt;a href="http://p.weather.com.cn/2024/03/3712142.shtml"  target="_blank" title="广西南宁春耕春种忙 田园大地色令人流连忘返"&gt;广西南宁春耕春种忙 田园大地色令人流连忘返&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;

  &lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F080dabacb001ad3dc8b9b9049b36d43b' type='text/javascript'%3E%3C/script%3E"));
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

https://weather.cma.cn/
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html&gt;
 &lt;head&gt; 
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"&gt; 
  &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt; 
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; 
  &lt;meta name="description" content="中国气象局提供权威的天气预报、气象预警、卫星云图、雷达图等专业服务产品"&gt; 
  &lt;meta name="keywords" content="中国气象局、气象局、天气、天气预报、气候、气象、气候、气候变化、预警"&gt; 
  &lt;link rel="shortcut icon" href="/assets/favicon.ico"&gt; 
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
  &lt;link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1145929_t7e3a52mhxh.css"&gt; 
  &lt;link rel="stylesheet" type="text/css" href="/assets/lib/mCustomScrollbar/jquery.mCustomScrollbar.min.css"&gt; 
  &lt;link rel="stylesheet" href="/assets/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"&gt; 
  &lt;link rel="stylesheet" type="text/css" href="/assets/cma/css/pub.css?v=20240410210900"&gt; 
  &lt;script type="text/javascript" src="/assets/lib/jquery-1.9.1.min.js"&gt;&lt;/script&gt; 
  &lt;!--[if lt IE 9]&gt;
　&lt;script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"&gt;&lt;/script&gt;
  &lt;script src="/static/bootstrap-slider/html5shiv.min.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt; 
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"&gt; 
  &lt;meta http-equiv="X-UA-Compatible" content="IE=9"&gt; 
  &lt;script&gt;
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c758855eca53e5d78186936566552a13";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
&lt;/script&gt; 
  &lt;script&gt;
	var ctx = '/web';
&lt;/script&gt; 
  &lt;title&gt;中国气象局-天气预报&lt;/title&gt; 
  &lt;link href="/assets/lib/leaflet/leaflet.css" rel="stylesheet" type="text/css"&gt; 
  &lt;script type="text/javascript" src="/static/SuperSlide/jquery.SuperSlide.2.1.js"&gt;&lt;/script&gt; 
  &lt;style&gt;
		.leaflet-popup-content-wrapper{border-radius:0;padding:0 0 1px 0;}
		.leaflet-popup-content{width:170px;margin:0;}
	     .mypopup .popup-title{
	     	padding: 10px 10px;
		    background-color: #4989c6;
		    color: #fff;
		    margin:0;
	     }
	     .leaflet-container a.leaflet-popup-close-button{color:#fff;}
	&lt;/style&gt; 
 &lt;/head&gt; 
 &lt;body&gt; 
  &lt;nav class="navbar navbar-default top-navbar" style="margin-bottom:0;"&gt; 
   &lt;div class="container"&gt; 
    &lt;div class="collapse navbar-collapse" style="padding:0;"&gt; 
     &lt;ul class="nav navbar-nav"&gt; 
      &lt;li class="active_"&gt;&lt;a href="http://www.cma.gov.cn"&gt;主站首页&lt;/a&gt;&lt;/li&gt; 
      &lt;li class="active_"&gt;&lt;a href="http://www.cma.gov.cn/2011zwxx/2011zbmgk/"&gt;领导主站&lt;/a&gt;&lt;/li&gt; 
      &lt;li class="active_"&gt;&lt;a href="http://www.cma.gov.cn/2011zwxx/2011zbmgk/"&gt;部门概况&lt;/a&gt;&lt;/li&gt; 
      &lt;li class="active_"&gt;&lt;a href="http://www.cma.gov.cn/2011xwzx/2011xqxxw/"&gt;新闻资讯&lt;/a&gt;&lt;/li&gt; 
      &lt;li class="active_"&gt;&lt;a href="http://zwgk.cma.gov.cn/zfxxgk/gkzn/"&gt;信息公开&lt;/a&gt;&lt;/li&gt; 
      &lt;li class="active_"&gt;&lt;a href="http://www.cma.gov.cn"&gt;服务办事&lt;/a&gt;&lt;/li&gt; 
      &lt;li class="active_"&gt;&lt;a href="/web"&gt;天气预报&lt;/a&gt;&lt;/li&gt; 
     &lt;/ul&gt; 
    &lt;/div&gt; 
   &lt;/div&gt; 
  &lt;/nav&gt; 
  &lt;nav id="header" class="navbar" style="margin-bottom:0;"&gt; 
   &lt;div class="container"&gt; 
    &lt;div class="collapse navbar-collapse"&gt; 
     &lt;ul class="nav navbar-nav"&gt; 
      &lt;li class="active"&gt;&lt;a href="//weather.cma.cn" style="background-color: #fff;"&gt;&lt;img src="/assets/cmalogo.png"&gt;&lt;/a&gt;&lt;/li&gt; 
     &lt;/ul&gt; 
     &lt;form class="navbar-form navbar-right" style="margin-top:15px;"&gt; 
      &lt;div class="searchForm"&gt; 
       &lt;input type="text" id="searchInput" placeholder="输入城市名称查询天气" autocomplete="off" class="ac_input"&gt; 
       &lt;i class="iconfont icon-search"&gt;&lt;/i&gt; 
       &lt;div id="selectCityDiv" style="display: none;"&gt; 
        &lt;ul class="nav nav-tabs tab2 tabrank tabflag" role="tablist"&gt; 
         &lt;li class="active"&gt;&lt;a class="tabflag" href="#gn" data-toggle="tab" aria-expanded="true"&gt;国内&lt;/a&gt;&lt;/li&gt; 
         &lt;li class=""&gt;&lt;a class="tabflag" href="#gw" data-toggle="tab" aria-expanded="false"&gt;国外&lt;/a&gt;&lt;/li&gt; 
        &lt;/ul&gt; 
        &lt;div class="tab-content" style="overflow: hidden; border-top:1px solid #ddd; padding:4px;"&gt; 
         &lt;div class="tab-pane active" id="gn" style="padding:0 15px;"&gt; 
          &lt;div class="row citylist"&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/58367.html"&gt;上海&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/51463.html"&gt;乌鲁木齐&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/52889.html"&gt;兰州&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/54511.html"&gt;北京&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/58238.html"&gt;南京&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/58606.html"&gt;南昌&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/58321.html"&gt;合肥&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/53463.html"&gt;呼和浩特&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/50953.html"&gt;哈尔滨&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/53772.html"&gt;太原&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/59287.html"&gt;广州&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/56294.html"&gt;成都&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/55591.html"&gt;拉萨&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/56778.html"&gt;昆明&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/58457.html"&gt;杭州&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/57494.html"&gt;武汉&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/54342.html"&gt;沈阳&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/54823.html"&gt;济南&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/59758.html"&gt;海口&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/59493.html"&gt;深圳&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/53698.html"&gt;石家庄&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/58847.html"&gt;福州&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/52866.html"&gt;西宁&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/57036.html"&gt;西安&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/57816.html"&gt;贵阳&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/57083.html"&gt;郑州&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/57516.html"&gt;重庆&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/53614.html"&gt;银川&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/54161.html"&gt;长春&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/57679.html"&gt;长沙&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/54517.html"&gt;天津&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/45005.html"&gt;香港&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/45011.html"&gt;澳门&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/58968.html"&gt;台北&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-2 city"&gt;
            &lt;a href="/web/weather/59431.html"&gt;南宁&lt;/a&gt;
           &lt;/div&gt; 
          &lt;/div&gt; 
         &lt;/div&gt; 
         &lt;div class="tab-pane" id="gw" style="padding:0 15px;"&gt; 
          &lt;div class="row citylist"&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/062721.html"&gt;喀土穆&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/003772.html"&gt;伦敦&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/068816.html"&gt;开普敦&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/061641.html"&gt;达喀尔&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05021.html"&gt;弗里敦&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/065563.html"&gt;亚穆苏克罗&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/063260.html"&gt;摩加迪沙&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/064950.html"&gt;雅温得&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05020.html"&gt;朱巴&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/063980.html"&gt;维多利亚&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/061832.html"&gt;科纳克里&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/065472.html"&gt;阿克拉&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/067665.html"&gt;卢萨卡&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/067341.html"&gt;马普托&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/064500.html"&gt;利伯维尔&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05019.html"&gt;温得和克&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/061442.html"&gt;努瓦克肖特&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05025.html"&gt;罗安达&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/063125.html"&gt;吉布提市&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/063450.html"&gt;亚的斯亚贝巴&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/063740.html"&gt;内罗毕&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/065125.html"&gt;阿布贾&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/064700.html"&gt;恩贾梅纳&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05024.html"&gt;布拉柴维尔&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/067775.html"&gt;哈拉雷&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/060390.html"&gt;阿尔及尔&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05018.html"&gt;多多马&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/063894.html"&gt;达累斯萨拉姆&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/064390.html"&gt;布琼布拉&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/008589.html"&gt;普拉亚&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/063705.html"&gt;坎帕拉&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05017.html"&gt;班珠尔&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/065387.html"&gt;洛美&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/064387.html"&gt;基加利&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/060135.html"&gt;拉巴特&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/067083.html"&gt;塔那那利佛&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/060715.html"&gt;突尼斯市&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/040103.html"&gt;的黎波里&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/062010.html"&gt;的黎波里&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/062366.html"&gt;开罗&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/064810.html"&gt;马拉博&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05009.html"&gt;蒙罗维亚&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/061291.html"&gt;巴马科&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/047108.html"&gt;首尔&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/044292.html"&gt;乌兰巴托&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/048698.html"&gt;新加坡市&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/097390.html"&gt;帝力&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/048647.html"&gt;吉隆坡&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/048074.html"&gt;内比都&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/048991.html"&gt;金边&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/048820.html"&gt;河内&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/048940.html"&gt;万象&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/096315.html"&gt;斯里巴加湾市&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/041571.html"&gt;伊斯兰堡&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/043466.html"&gt;科伦坡&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/041923.html"&gt;达卡&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/044454.html"&gt;加德满都&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/043555.html"&gt;马累&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/041217.html"&gt;阿布扎比&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/040582.html"&gt;科威特城&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/017130.html"&gt;安卡拉&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/041170.html"&gt;多哈&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/041256.html"&gt;马斯喀特&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/040100.html"&gt;贝鲁特&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/040438.html"&gt;利雅得&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/041150.html"&gt;麦纳麦&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/040754.html"&gt;德黑兰&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/040650.html"&gt;巴格达&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/040948.html"&gt;喀布尔&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/037864.html"&gt;巴库&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/037545.html"&gt;第比利斯&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/037788.html"&gt;埃里温&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/035188.html"&gt;阿斯塔纳&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/038353.html"&gt;比什凯克&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/038836.html"&gt;杜尚别&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/038457.html"&gt;塔什干&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/048455.html"&gt;曼谷&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/096741.html"&gt;雅加达&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/098425.html"&gt;马尼拉&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/041404.html"&gt;萨那&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05010.html"&gt;尼科西亚&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/027612.html"&gt;莫斯科&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/011035.html"&gt;维也纳&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/016716.html"&gt;雅典&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/012375.html"&gt;华沙&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/013274.html"&gt;贝尔格莱德&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/011520.html"&gt;布拉格&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/015614.html"&gt;索非亚&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/011816.html"&gt;布拉迪斯拉发&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/013615.html"&gt;地拉那&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/014240.html"&gt;萨格勒布&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/014654.html"&gt;萨拉热窝&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/013462.html"&gt;波德戈里察&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/026038.html"&gt;塔林&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/026730.html"&gt;维尔纽斯&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/014014.html"&gt;卢布尔雅那&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/012843.html"&gt;布达佩斯&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/013586.html"&gt;斯科普里&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/015420.html"&gt;布加勒斯特&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/026422.html"&gt;里加&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/033345.html"&gt;基辅&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/026850.html"&gt;明斯克&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/033815.html"&gt;基希讷乌&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05005.html"&gt;瓦莱塔&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/008535.html"&gt;里斯本&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05011.html"&gt;卢森堡&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/093439.html"&gt;惠灵顿&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/094035.html"&gt;莫尔斯比港&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05007.html"&gt;阿皮亚&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05022.html"&gt;阿洛菲&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05004.html"&gt;苏瓦&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05014.html"&gt;帕利基尔&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05013.html"&gt;阿瓦鲁阿&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05003.html"&gt;努库阿洛法&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05012.html"&gt;维拉港&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/085574.html"&gt;圣地亚哥&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05023.html"&gt;乔治敦&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/006240.html"&gt;阿姆斯特丹&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/086580.html"&gt;蒙得维的亚&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/080415.html"&gt;加拉加斯&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05016.html"&gt;帕拉马里博&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G84071.html"&gt;基多&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/084628.html"&gt;利马&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/078762.html"&gt;圣何塞&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/078806.html"&gt;巴拿马城&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05015.html"&gt;圣萨尔瓦多&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05006.html"&gt;圣多明各&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/078970.html"&gt;西班牙港&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/078862.html"&gt;圣约翰&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05026.html"&gt;罗索&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05008.html"&gt;圣乔治&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05002.html"&gt;布里奇顿&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/078224.html"&gt;哈瓦那&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/G05001.html"&gt;金斯敦&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/047662.html"&gt;东京&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/072405.html"&gt;华盛顿&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/006180.html"&gt;哥本哈根&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/094926.html"&gt;堪培拉&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/076680.html"&gt;墨西哥城&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/040080.html"&gt;大马士革&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/﻿001492.html"&gt;奥斯陆&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/040270.html"&gt;安曼&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/061052.html"&gt;尼亚美&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/083377.html"&gt;巴西利亚&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/007149.html"&gt;巴黎&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/087582.html"&gt;布宜诺斯艾利斯&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/006451.html"&gt;布鲁塞尔&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/047058.html"&gt;平壤&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/042299.html"&gt;廷布&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/076405.html"&gt;拉巴斯&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/002464.html"&gt;斯德哥尔摩&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/042182.html"&gt;新德里&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/010385.html"&gt;柏林&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/065344.html"&gt;波多诺伏&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/071628.html"&gt;渥太华&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/064650.html"&gt;班吉&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/065503.html"&gt;瓦加杜古&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/016242.html"&gt;罗马&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/040183.html"&gt;耶路撒冷&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/067001.html"&gt;莫罗尼&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/002974.html"&gt;赫尔辛基&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/061990.html"&gt;路易港&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/064210.html"&gt;金沙萨&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/038880.html"&gt;阿什哈巴德&lt;/a&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-3 city"&gt;
            &lt;a href="/web/weather/008221.html"&gt;马德里&lt;/a&gt;
           &lt;/div&gt; 
          &lt;/div&gt; 
         &lt;/div&gt; 
        &lt;/div&gt; 
       &lt;/div&gt; 
      &lt;/div&gt; 
     &lt;/form&gt; 
    &lt;/div&gt; 
   &lt;/div&gt; 
  &lt;/nav&gt; 
  &lt;nav class="navbar navbar-default cma-navbar" style="margin-bottom:10px;"&gt; 
   &lt;div class="container"&gt; 
    &lt;a href="/" target="_self" style="width:12.5%;"&gt;首页&lt;/a&gt; 
    &lt;a href="/web/channel-2b0863600e144b13807e606f928b1266.html" target="_self" style="width:12.5%;"&gt;天气实况&lt;/a&gt; 
    &lt;a href="/web/channel-380.html" target="_self" style="width:12.5%;"&gt;气象公报&lt;/a&gt; 
    &lt;a href="/web/alarm/map.html" target="_self" style="width:12.5%;"&gt;气象预警&lt;/a&gt; 
    &lt;a href="/web/weather/map.html" target="_self" style="width:12.5%;"&gt;城市预报&lt;/a&gt; 
    &lt;a href="http://www.cma.gov.cn" target="_blank" style="width:12.5%;"&gt;天气资讯&lt;/a&gt; 
    &lt;a href="http://www.cma.gov.cn/2011xwzx/2011xztbd/" target="_blank" style="width:12.5%;"&gt;气象专题&lt;/a&gt; 
    &lt;a href="http://www.cma.gov.cn/kppd/index.html" target="_blank" style="width:12.5%;"&gt;气象科普&lt;/a&gt; 
   &lt;/div&gt; 
  &lt;/nav&gt; 
  &lt;div class="container"&gt; 
   &lt;a href="#" id="current-station"&gt; 
    &lt;div class="row my_city"&gt; 
     &lt;div class="col-xs-4"&gt; 
      &lt;div class="row city_name"&gt; 
       &lt;div class="col-xs-8 text-left"&gt;&lt;/div&gt; 
       &lt;div class="col-xs-4 text-right"&gt;&lt;/div&gt; 
      &lt;/div&gt; 
      &lt;div class="row"&gt;
       &lt;div class="col-xs-12 temperatrue"&gt;&lt;/div&gt;
      &lt;/div&gt; 
      &lt;div class="row city_detail"&gt; 
       &lt;div class="col-xs-3"&gt; 
        &lt;div class="row"&gt;
         &lt;i class="iconfont icon-humidity"&gt;&lt;/i&gt;
        &lt;/div&gt; 
        &lt;div class="row"&gt;
         降水
        &lt;/div&gt; 
        &lt;div class="row"&gt;
         -
        &lt;/div&gt; 
       &lt;/div&gt; 
       &lt;div class="col-xs-3"&gt; 
        &lt;div class="row"&gt;
         &lt;i class="iconfont icon-Windpower"&gt;&lt;/i&gt;
        &lt;/div&gt; 
        &lt;div class="row"&gt;
         -
        &lt;/div&gt; 
        &lt;div class="row"&gt;
         -
        &lt;/div&gt; 
       &lt;/div&gt; 
       &lt;div class="col-xs-3"&gt; 
        &lt;div class="row"&gt;
         &lt;i class="iconfont icon-humidity"&gt;&lt;/i&gt;
        &lt;/div&gt; 
        &lt;div class="row"&gt;
         相对湿度
        &lt;/div&gt; 
        &lt;div class="row"&gt;
         -
        &lt;/div&gt; 
       &lt;/div&gt; 
       &lt;div class="col-xs-3"&gt; 
        &lt;div class="row"&gt;
         &lt;i class="iconfont icon-qiya"&gt;&lt;/i&gt;
        &lt;/div&gt; 
        &lt;div class="row"&gt;
         气压
        &lt;/div&gt; 
        &lt;div class="row"&gt;
         -
        &lt;/div&gt; 
       &lt;/div&gt; 
      &lt;/div&gt; 
     &lt;/div&gt; 
     &lt;div class="col-xs-8" id="day7Div"&gt; 
     &lt;/div&gt; 
    &lt;/div&gt; &lt;/a&gt; 
   &lt;div class="row"&gt; 
    &lt;!--左侧幻灯片 start--&gt; 
    &lt;div class="col-xs-8"&gt; 
     &lt;div id="demo2" class="picBtnTop"&gt; 
      &lt;div class="hd"&gt; 
       &lt;ul&gt; 
        &lt;li class=""&gt; &lt;a href="/web/channel-339.html"&gt; 
          &lt;div class="row"&gt; 
           &lt;div class="col-xs-6"&gt;
            &lt;img src="/file/2024/04/10/SEVP_NMC_STFC_SFER_ER24_ACHN_L88_P9_20240410130002400.jpg?v=1712742390771"&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-6 table-cell"&gt;
            &lt;div class="li-title"&gt;
             全国24小时降水量预报
            &lt;/div&gt;
           &lt;/div&gt; 
          &lt;/div&gt; &lt;/a&gt; &lt;/li&gt; 
        &lt;li class=""&gt; &lt;a href="/web/channel-2b0863600e144b13807e606f928b1266.html"&gt; 
          &lt;div class="row"&gt; 
           &lt;div class="col-xs-6"&gt;
            &lt;img src="/file/2024/04/10/SEVP_NSMC_WXBL_FY4B_ETCC_ACHN_LNO_PY_20240410123000000.JPG?v=1712754489014"&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-6 table-cell"&gt;
            &lt;div class="li-title"&gt;
             FY-4B
            &lt;/div&gt;
           &lt;/div&gt; 
          &lt;/div&gt; &lt;/a&gt; &lt;/li&gt; 
        &lt;li class=""&gt; &lt;a href="/web/channel-380.html"&gt; 
          &lt;div class="row"&gt; 
           &lt;div class="col-xs-6"&gt;
            &lt;img src="/file/2024/04/10/SEVP_NMC_CDWP_SFER_EME_ACHN_LNO_P9_20240410000000000_base64_1.jpg?v=1712711071268"&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-6 table-cell"&gt;
            &lt;div class="li-title"&gt;
             每日天气提示
            &lt;/div&gt;
           &lt;/div&gt; 
          &lt;/div&gt; &lt;/a&gt; &lt;/li&gt; 
        &lt;li class=""&gt; &lt;a href="/web/channel-423.html"&gt; 
          &lt;div class="row"&gt; 
           &lt;div class="col-xs-6"&gt;
            &lt;img src="/file/2024/04/10/SEVP_NMC_TRFC_SFER_EME_ACHN_L88_P9_20240410120002400_01.jpg?v=1712744716870"&gt;
           &lt;/div&gt; 
           &lt;div class="col-xs-6 table-cell"&gt;
            &lt;div class="li-title"&gt;
             交通气象预报
            &lt;/div&gt;
           &lt;/div&gt; 
          &lt;/div&gt; &lt;/a&gt; &lt;/li&gt; 
       &lt;/ul&gt; 
      &lt;/div&gt; 
      &lt;div class="bd"&gt; 
       &lt;ul&gt; 
        &lt;li style="display: none;"&gt; 
         &lt;div class="pic"&gt;
          &lt;a href="/web/channel-339.html" style="background-color:black;"&gt;&lt;img src="/file/2024/04/10/SEVP_NMC_STFC_SFER_ER24_ACHN_L88_P9_20240410130002400.jpg?v=1712742390771"&gt;&lt;/a&gt;
         &lt;/div&gt; &lt;/li&gt; 
        &lt;li style="display: none;"&gt; 
         &lt;div class="pic"&gt;
          &lt;a href="/web/channel-2b0863600e144b13807e606f928b1266.html" style="background-color:black;"&gt;&lt;img src="/file/2024/04/10/SEVP_NSMC_WXBL_FY4B_ETCC_ACHN_LNO_PY_20240410123000000.JPG?v=1712754489014"&gt;&lt;/a&gt;
         &lt;/div&gt; &lt;/li&gt; 
        &lt;li style="display: none;"&gt; 
         &lt;div class="pic"&gt;
          &lt;a href="/web/channel-380.html" style="background-color:black;"&gt;&lt;img src="/file/2024/04/10/SEVP_NMC_CDWP_SFER_EME_ACHN_LNO_P9_20240410000000000_base64_1.jpg?v=1712711071268"&gt;&lt;/a&gt;
         &lt;/div&gt; &lt;/li&gt; 
        &lt;li style="display: none;"&gt; 
         &lt;div class="pic"&gt;
          &lt;a href="/web/channel-423.html" style="background-color:black;"&gt;&lt;img src="/file/2024/04/10/SEVP_NMC_TRFC_SFER_EME_ACHN_L88_P9_20240410120002400_01.jpg?v=1712744716870"&gt;&lt;/a&gt;
         &lt;/div&gt; &lt;/li&gt; 
       &lt;/ul&gt; 
      &lt;/div&gt; 
     &lt;/div&gt; 
    &lt;/div&gt; 
    &lt;script type="text/javascript"&gt;
				//唯一不同：jQuery("#demo1")
				jQuery("#demo2").slide({ mainCell:".bd ul",effect:"fade",autoPlay:true,triggerTime:0 });
			&lt;/script&gt; 
    &lt;!--左侧幻灯片 end--&gt; 
    &lt;!--右侧我的天气 start--&gt; 
    &lt;div class="col-xs-4"&gt; 
     &lt;div class="hp"&gt; 
      &lt;div class="hd icon_rmcs"&gt;
       实况排行
      &lt;/div&gt; 
      &lt;div class="hb" style="height:380px;padding:0;"&gt; 
       &lt;ul class="nav nav-tabs tab2 tabrank" role="tablist"&gt; 
        &lt;li class="active"&gt;&lt;a href="#HOT" data-toggle="tab" aria-expanded="true"&gt;今日高温&lt;/a&gt;&lt;/li&gt; 
        &lt;li class=""&gt;&lt;a href="#HB" data-toggle="tab" aria-expanded="false"&gt;今日低温&lt;/a&gt;&lt;/li&gt; 
        &lt;li class=""&gt;&lt;a href="#DB" data-toggle="tab"&gt;昼夜温差&lt;/a&gt;&lt;/li&gt; 
        &lt;li class=""&gt;&lt;a href="#HD" data-toggle="tab"&gt;24小时降水&lt;/a&gt;&lt;/li&gt; 
       &lt;/ul&gt; 
       &lt;div class="tab-content" style="overflow: hidden; border-top:1px solid #ddd; padding:4px;"&gt; 
        &lt;div class="tab-pane active" id="HOT"&gt; 
         &lt;a href="#" class="order order-header"&gt; 
          &lt;div class="rank"&gt;
           排名
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           城市
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           省份
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           最高温度
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/56673" class="order"&gt; 
          &lt;div class="rank"&gt;
           1
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           巧家
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           云南
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           37.1℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/56966" class="order"&gt; 
          &lt;div class="rank"&gt;
           2
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           元江
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           云南
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           37℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/56763" class="order"&gt; 
          &lt;div class="rank"&gt;
           3
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           元谋
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           云南
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           36.8℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/56688" class="order"&gt; 
          &lt;div class="rank"&gt;
           4
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           东川
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           云南
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           36.4℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/56976" class="order"&gt; 
          &lt;div class="rank"&gt;
           5
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           元阳
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           云南
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           35.9℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/56950" class="order"&gt; 
          &lt;div class="rank"&gt;
           6
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           双江
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           云南
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           35.7℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/56578" class="order"&gt; 
          &lt;div class="rank"&gt;
           7
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           宁南
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           四川
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           35.7℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/56949" class="order"&gt; 
          &lt;div class="rank"&gt;
           8
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           孟连
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           云南
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           35.3℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/56954" class="order"&gt; 
          &lt;div class="rank"&gt;
           9
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           澜沧
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           云南
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           35.1℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/56854" class="order"&gt; 
          &lt;div class="rank"&gt;
           10
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           云县
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           云南
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           34.9℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;div class="describe"&gt;
          根据今日00时至21时整点实况资料统计
         &lt;/div&gt; 
        &lt;/div&gt; 
        &lt;div class="tab-pane" id="HB"&gt; 
         &lt;a href="#" class="order order-header"&gt; 
          &lt;div class="rank"&gt;
           排名
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           城市
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           省份
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           最低温度
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/55178" class="order"&gt; 
          &lt;div class="rank"&gt;
           1
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           双湖
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           西藏
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           -18℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/55248" class="order"&gt; 
          &lt;div class="rank"&gt;
           2
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           改则
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           西藏
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           -15℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/55234" class="order"&gt; 
          &lt;div class="rank"&gt;
           3
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           革吉
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           西藏
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           -13.9℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/55542" class="order"&gt; 
          &lt;div class="rank"&gt;
           4
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           仲巴
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           西藏
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           -13.8℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/55357" class="order"&gt; 
          &lt;div class="rank"&gt;
           5
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           措勤
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           西藏
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           -11.5℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/55656" class="order"&gt; 
          &lt;div class="rank"&gt;
           6
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           珠峰大本营
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           西藏
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           -10.5℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/55294" class="order"&gt; 
          &lt;div class="rank"&gt;
           7
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           安多
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           西藏
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           -10.1℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/55361" class="order"&gt; 
          &lt;div class="rank"&gt;
           8
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           尼玛
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           西藏
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           -10.1℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/55664" class="order"&gt; 
          &lt;div class="rank"&gt;
           9
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           定日
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           西藏
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           -9.3℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/55228" class="order"&gt; 
          &lt;div class="rank"&gt;
           10
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           狮泉河
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           西藏
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           -9.3℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;div class="describe"&gt;
          根据今日00时至20时整点实况资料统计
         &lt;/div&gt; 
        &lt;/div&gt; 
        &lt;div class="tab-pane " id="DB"&gt; 
         &lt;a href="#" class="order order-header"&gt; 
          &lt;div class="rank"&gt;
           排名
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           城市
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           省份
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           温差
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/50349" class="order"&gt; 
          &lt;div class="rank"&gt;
           1
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           新林
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           黑龙江
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           25.9℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/51747" class="order"&gt; 
          &lt;div class="rank"&gt;
           2
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           塔中
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           新疆
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           25.1℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/50434" class="order"&gt; 
          &lt;div class="rank"&gt;
           3
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           图里河
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           内蒙古
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           24.5℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/50632" class="order"&gt; 
          &lt;div class="rank"&gt;
           4
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           博克图
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           内蒙古
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           24.1℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/51827" class="order"&gt; 
          &lt;div class="rank"&gt;
           5
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           墨玉
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           新疆
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           24℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/50673" class="order"&gt; 
          &lt;div class="rank"&gt;
           6
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           嘉荫
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           黑龙江
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           23.6℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/50353" class="order"&gt; 
          &lt;div class="rank"&gt;
           7
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           呼玛
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           黑龙江
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           23.5℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/50246" class="order"&gt; 
          &lt;div class="rank"&gt;
           8
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           塔河
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           黑龙江
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           23.5℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/50674" class="order"&gt; 
          &lt;div class="rank"&gt;
           9
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           乌伊岭
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           黑龙江
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           23.2℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/50247" class="order"&gt; 
          &lt;div class="rank"&gt;
           10
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           呼中
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           黑龙江
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           23.1℃
          &lt;/div&gt; &lt;/a&gt; 
         &lt;div class="describe"&gt;
          根据今日00时至00时整点实况资料统计
         &lt;/div&gt; 
        &lt;/div&gt; 
        &lt;div class="tab-pane " id="HD"&gt; 
         &lt;a href="#" class="order order-header"&gt; 
          &lt;div class="rank"&gt;
           排名
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           城市
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           省份
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           降水量
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/56281" class="order"&gt; 
          &lt;div class="rank"&gt;
           1
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           蒲江
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           四川
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           15.4mm
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/57604" class="order"&gt; 
          &lt;div class="rank"&gt;
           2
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           纳溪
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           四川
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           13.3mm
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/56319" class="order"&gt; 
          &lt;div class="rank"&gt;
           3
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           墨脱
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           西藏
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           13.3mm
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/57129" class="order"&gt; 
          &lt;div class="rank"&gt;
           4
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           西乡
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           陕西
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           13.2mm
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/51438" class="order"&gt; 
          &lt;div class="rank"&gt;
           5
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           特克斯
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           新疆
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           13.2mm
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/51377" class="order"&gt; 
          &lt;div class="rank"&gt;
           6
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           阜康
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           新疆
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           13mm
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/51436" class="order"&gt; 
          &lt;div class="rank"&gt;
           7
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           新源
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           新疆
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           12.9mm
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/57217" class="order"&gt; 
          &lt;div class="rank"&gt;
           8
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           旺苍
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           四川
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           12.4mm
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/51465" class="order"&gt; 
          &lt;div class="rank"&gt;
           9
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           小渠子
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           新疆
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           11.6mm
          &lt;/div&gt; &lt;/a&gt; 
         &lt;a href="/web/weather/57508" class="order"&gt; 
          &lt;div class="rank"&gt;
           10
          &lt;/div&gt; 
          &lt;div class="sname"&gt;
           泸县
          &lt;/div&gt; 
          &lt;div class="pname"&gt;
           四川
          &lt;/div&gt; 
          &lt;div class="value"&gt;
           10.9mm
          &lt;/div&gt; &lt;/a&gt; 
         &lt;div class="describe"&gt;
          根据2024年04月10日20时实况资料统计
         &lt;/div&gt; 
        &lt;/div&gt; 
       &lt;/div&gt; 
      &lt;/div&gt; 
     &lt;/div&gt; 
    &lt;/div&gt; 
    &lt;!--右侧我的天气 end--&gt; 
   &lt;/div&gt; 
   &lt;div class="row"&gt; 
    &lt;div class="col-xs-12"&gt; 
     &lt;div class="hp mt15"&gt; 
      &lt;div class="hd icon_zt"&gt;
       气象专题
       &lt;a href="http://www.cma.gov.cn/2011xwzx/2011xztbd" class="more" target="_blank"&gt;更多&lt;/a&gt;
      &lt;/div&gt; 
      &lt;div class="row hb" style="padding-bottom:0;"&gt; 
       &lt;div class="col-xs-3 zt"&gt; 
        &lt;a href="https://www.cma.gov.cn/ztbd/2024zt/20240402/index.html" title="强化风险管理 完善递进服务 落实叫应联动 全力以赴做好汛期气象服务" class="zt-item" target="_blank"&gt; &lt;img src="http://www.cma.gov.cn/2011xwzx/2011xztbd/202404/W020240402527841348712.jpg" onerror="this.src='/assets/cma/img/zt_01.png';"&gt; 
         &lt;div&gt;
          强化风险管理 完善递进服务 落实叫应联动 全力以赴做好汛期气象服务
         &lt;/div&gt; &lt;/a&gt; 
       &lt;/div&gt; 
       &lt;div class="col-xs-3 zt"&gt; 
        &lt;a href="https://www.cma.gov.cn/ztbd/2024zt/24jq/qm/index.html" title="二十四节气融媒体专题丨清明：气清景明 万物皆显" class="zt-item" target="_blank"&gt; &lt;img src="http://www.cma.gov.cn/2011xwzx/2011xztbd/202404/W020240403498675112906.jpg" onerror="this.src='/assets/cma/img/zt_01.png';"&gt; 
         &lt;div&gt;
          二十四节气融媒体专题丨清明：气清景明 万物皆显
         &lt;/div&gt; &lt;/a&gt; 
       &lt;/div&gt; 
       &lt;div class="col-xs-3 zt"&gt; 
        &lt;a href="https://www.cma.gov.cn/ztbd/2024zt/20240322/index.html" title="专题丨你好，世界气象日" class="zt-item" target="_blank"&gt; &lt;img src="http://www.cma.gov.cn/2011xwzx/2011xztbd/202403/W020240323558724040570.png" onerror="this.src='/assets/cma/img/zt_01.png';"&gt; 
         &lt;div&gt;
          专题丨你好，世界气象日
         &lt;/div&gt; &lt;/a&gt; 
       &lt;/div&gt; 
       &lt;div class="col-xs-3 zt"&gt; 
        &lt;a href="https://www.cma.gov.cn/ztbd/2024zt/2024qxr/index.html" title="专题丨2024年世界气象日" class="zt-item" target="_blank"&gt; &lt;img src="http://www.cma.gov.cn/2011xwzx/2011xztbd/202403/W020240322658961789990.jpg" onerror="this.src='/assets/cma/img/zt_01.png';"&gt; 
         &lt;div&gt;
          专题丨2024年世界气象日
         &lt;/div&gt; &lt;/a&gt; 
       &lt;/div&gt; 
      &lt;/div&gt; 
     &lt;/div&gt; 
    &lt;/div&gt; 
   &lt;/div&gt; 
   &lt;div class="row mt15"&gt; 
    &lt;div class="col-xs-8"&gt; 
     &lt;div class="hp"&gt; 
      &lt;div class="hd icon_weather"&gt;
       天气预报
       &lt;a href="/web/text/area.html" class="more"&gt;更多&lt;/a&gt;
      &lt;/div&gt; 
      &lt;div class="hb" id="map" style="height:606px;position:relative;"&gt; 
       &lt;div id="mapbar"&gt; 
        &lt;div class="btn-group" role="group"&gt; 
         &lt;div class="btn-group" role="group"&gt; 
          &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt; &lt;span id="pcode" data-value=""&gt;全国&lt;/span&gt; &lt;span class="caret"&gt;&lt;/span&gt; &lt;/button&gt; 
          &lt;div class="dropdown-menu dropdown-menu-left" id="pcodeList" style="width:400px;"&gt; 
           &lt;div class="row-fluid"&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="" data-aid=""&gt; 全国&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="ABJ" data-aid="11"&gt; 北京&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="ATJ" data-aid="12"&gt; 天津&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AHE" data-aid="13"&gt; 河北&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="ASX" data-aid="14"&gt; 山西&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="ANM" data-aid="15"&gt; 内蒙古&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="ALN" data-aid="21"&gt; 辽宁&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AJL" data-aid="22"&gt; 吉林&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AHL" data-aid="23"&gt; 黑龙江&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="ASH" data-aid="31"&gt; 上海&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AJS" data-aid="32"&gt; 江苏&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AZJ" data-aid="33"&gt; 浙江&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AAH" data-aid="34"&gt; 安徽&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AFJ" data-aid="35"&gt; 福建&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AJX" data-aid="36"&gt; 江西&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="ASD" data-aid="37"&gt; 山东&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AHA" data-aid="41"&gt; 河南&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AHB" data-aid="42"&gt; 湖北&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AHN" data-aid="43"&gt; 湖南&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AGD" data-aid="44"&gt; 广东&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AGX" data-aid="45"&gt; 广西&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AHI" data-aid="46"&gt; 海南&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="ACQ" data-aid="50"&gt; 重庆&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="ASC" data-aid="51"&gt; 四川&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AGZ" data-aid="52"&gt; 贵州&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AYN" data-aid="53"&gt; 云南&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AXZ" data-aid="54"&gt; 西藏&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="ASN" data-aid="61"&gt; 陕西&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AGS" data-aid="62"&gt; 甘肃&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AQH" data-aid="63"&gt; 青海&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="ANX" data-aid="64"&gt; 宁夏&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AXJ" data-aid="65"&gt; 新疆&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AXG" data-aid=""&gt; 香港&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="AAM" data-aid=""&gt; 澳门&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
            &lt;div class="col-xs-3"&gt;
             &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="ATW" data-aid=""&gt; 台湾&lt;/label&gt;
             &lt;/div&gt;
            &lt;/div&gt; 
           &lt;/div&gt; 
          &lt;/div&gt; 
         &lt;/div&gt; 
        &lt;/div&gt; 
       &lt;/div&gt; 
      &lt;/div&gt; 
     &lt;/div&gt; 
    &lt;/div&gt; 
    &lt;div class="col-xs-4"&gt; 
     &lt;div class="hp"&gt; 
      &lt;div class="hd icon_alarm"&gt;
       气象预警
       &lt;a href="/web/alarm/map.html" class="more"&gt;更多&lt;/a&gt;
      &lt;/div&gt; 
      &lt;div class="hb" style="height:270px;"&gt; 
       &lt;!--预警信号 start--&gt; 
       &lt;div class="row alarm-item"&gt; 
        &lt;div class="col-xs-12"&gt; 
         &lt;a target="_blank" href="/web/alarm/23000041600000_20240410165900.html" class="alarm-title" title="黑龙江省发布森林（草原）火险黄色预警"&gt; &lt;img src="http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B41_YELLOW.png" onerror="this.onerror='';this.src='http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B99_YELLOW.png';"&gt; 黑龙江省发布森林（草原）火险黄色预警 &lt;/a&gt; 
        &lt;/div&gt; 
       &lt;/div&gt; 
       &lt;div class="row alarm-item"&gt; 
        &lt;div class="col-xs-12"&gt; 
         &lt;a target="_blank" href="/web/alarm/37000041600000_20240410162608.html" class="alarm-title" title="山东省发布其它气象灾害黄色预警"&gt; &lt;img src="http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B99_YELLOW.png" onerror="this.onerror='';this.src='http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B99_YELLOW.png';"&gt; 山东省发布其它气象灾害黄色预警 &lt;/a&gt; 
        &lt;/div&gt; 
       &lt;/div&gt; 
       &lt;div class="row alarm-item"&gt; 
        &lt;div class="col-xs-12"&gt; 
         &lt;a target="_blank" href="/web/alarm/22000041600000_20240410153032.html" class="alarm-title" title="吉林省发布森林火险黄色预警"&gt; &lt;img src="http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B25_YELLOW.png" onerror="this.onerror='';this.src='http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B99_YELLOW.png';"&gt; 吉林省发布森林火险黄色预警 &lt;/a&gt; 
        &lt;/div&gt; 
       &lt;/div&gt; 
       &lt;div class="row alarm-item"&gt; 
        &lt;div class="col-xs-12"&gt; 
         &lt;a target="_blank" href="/web/alarm/13060041600000_20240410203953.html" class="alarm-title" title="河北省保定市发布雷电黄色预警"&gt; &lt;img src="http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B14_YELLOW.png" onerror="this.onerror='';this.src='http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B99_YELLOW.png';"&gt; 河北省保定市发布雷电黄色预警 &lt;/a&gt; 
        &lt;/div&gt; 
       &lt;/div&gt; 
       &lt;div class="row alarm-item"&gt; 
        &lt;div class="col-xs-12"&gt; 
         &lt;a target="_blank" href="/web/alarm/65430041600000_20240410181016.html" class="alarm-title" title="新疆维吾尔自治区阿勒泰地区发布大风黄色预警"&gt; &lt;img src="http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B06_YELLOW.png" onerror="this.onerror='';this.src='http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B99_YELLOW.png';"&gt; 新疆维吾尔自治区阿勒泰地区发布大风黄色预警 &lt;/a&gt; 
        &lt;/div&gt; 
       &lt;/div&gt; 
       &lt;div class="row alarm-item"&gt; 
        &lt;div class="col-xs-12"&gt; 
         &lt;a target="_blank" href="/web/alarm/45010041600000_20240410175759.html" class="alarm-title" title="广西壮族自治区南宁市发布大雾黄色预警"&gt; &lt;img src="http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B17_YELLOW.png" onerror="this.onerror='';this.src='http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B99_YELLOW.png';"&gt; 广西壮族自治区南宁市发布大雾黄色预警 &lt;/a&gt; 
        &lt;/div&gt; 
       &lt;/div&gt; 
       &lt;div class="row alarm-item"&gt; 
        &lt;div class="col-xs-12"&gt; 
         &lt;a target="_blank" href="/web/alarm/21050041600000_20240410172800.html" class="alarm-title" title="辽宁省本溪市发布大风蓝色预警"&gt; &lt;img src="http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B06_BLUE.png" onerror="this.onerror='';this.src='http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B99_BLUE.png';"&gt; 辽宁省本溪市发布大风蓝色预警 &lt;/a&gt; 
        &lt;/div&gt; 
       &lt;/div&gt; 
       &lt;div class="row alarm-item"&gt; 
        &lt;div class="col-xs-12"&gt; 
         &lt;a target="_blank" href="/web/alarm/23000041600000_20240410165900.html" class="alarm-title" title="黑龙江省发布森林（草原）火险黄色预警"&gt; &lt;img src="http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B41_YELLOW.png" onerror="this.onerror='';this.src='http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/11B99_YELLOW.png';"&gt; 黑龙江省发布森林（草原）火险黄色预警 &lt;/a&gt; 
        &lt;/div&gt; 
       &lt;/div&gt; 
       &lt;!--预警信号 end--&gt; 
      &lt;/div&gt; 
     &lt;/div&gt; 
     &lt;div class="hp mt15"&gt; 
      &lt;div class="hd icon_tqzx"&gt;
       天气资讯
       &lt;a href="http://www.cma.gov.cn/2011xwzx/2011xqxxw/2011xzytq/" target="_blank" class="more"&gt;更多&lt;/a&gt;
      &lt;/div&gt; 
      &lt;div class="hb"&gt; 
       &lt;a href="http://www.cma.gov.cn/2011xwzx/2011xqxxw/2011xzytq/202404/t20240410_6188956.html" title="南方地区将有较强降水过程 黄淮东海等沿岸海域有大雾" class="newitem" target="_blank"&gt;南方地区将有较强降水过程 黄淮东海等沿岸海域有大雾&lt;/a&gt; 
       &lt;a href="http://www.cma.gov.cn/2011xwzx/2011xqxxw/2011xzytq/202404/t20240409_6186591.html" title="青藏高原东部有持续雨雪 10日夜间起南方地区将有较强降水过程" class="newitem" target="_blank"&gt;青藏高原东部有持续雨雪 10日夜间起南方地区将有较强降水过程&lt;/a&gt; 
       &lt;a href="http://www.cma.gov.cn/2011xwzx/2011xqxxw/2011xzytq/202404/t20240408_6184142.html" title="青藏高原东部有持续雨雪 冷空气影响华北东北地区" class="newitem" target="_blank"&gt;青藏高原东部有持续雨雪 冷空气影响华北东北地区&lt;/a&gt; 
       &lt;a href="http://www.cma.gov.cn/2011xwzx/2011xqxxw/2011xzytq/202404/t20240407_6181872.html" title="广东中东部福建有强降雨 青藏高原东部有持续雨雪" class="newitem" target="_blank"&gt;广东中东部福建有强降雨 青藏高原东部有持续雨雪&lt;/a&gt; 
       &lt;a href="http://www.cma.gov.cn/2011xwzx/2011xqxxw/2011xzytq/202404/t20240406_6181655.html" title="江南南部华南中东部有强降雨强对流 注意防范暴雨引发的次生灾害" class="newitem" target="_blank"&gt;江南南部华南中东部有强降雨强对流 注意防范暴雨引发的次生灾害&lt;/a&gt; 
       &lt;a href="http://www.cma.gov.cn/2011xwzx/2011xqxxw/2011xzytq/202404/t20240405_6181256.html" title="江南南部华南中北部有强降雨强对流" class="newitem" target="_blank"&gt;江南南部华南中北部有强降雨强对流&lt;/a&gt; 
       &lt;a href="http://www.cma.gov.cn/2011xwzx/2011xqxxw/2011xzytq/202404/t20240404_6180838.html" title="江南南部和华南中北部有强对流和强降雨天气" class="newitem" target="_blank"&gt;江南南部和华南中北部有强对流和强降雨天气&lt;/a&gt; 
       &lt;a href="http://www.cma.gov.cn/2011xwzx/2011xqxxw/2011xzytq/202404/t20240403_6176143.html" title="江南华南等地多强对流强降水" class="newitem" target="_blank"&gt;江南华南等地多强对流强降水&lt;/a&gt; 
      &lt;/div&gt; 
     &lt;/div&gt; 
    &lt;/div&gt; 
   &lt;/div&gt; 
   &lt;div class="row mt15"&gt; 
    &lt;div class="col-xs-4"&gt; 
     &lt;div class="hp"&gt; 
      &lt;div class="hd icon_wxyt"&gt;
       卫星云图
       &lt;a href="/web/channel-2b0863600e144b13807e606f928b1266.html" class="more"&gt;更多&lt;/a&gt;
      &lt;/div&gt; 
      &lt;div class="wrap"&gt; 
       &lt;a href="/web/channel-2b0863600e144b13807e606f928b1266.html" class="product"&gt;&lt;img src="/file/2024/04/10/SEVP_NSMC_WXBL_FY4B_ETCC_ACHN_LNO_PY_20240410123000000.JPG?v=1712754489014" style="height:324px; padding:3px;"&gt;&lt;/a&gt; 
      &lt;/div&gt; 
     &lt;/div&gt; 
    &lt;/div&gt; 
    &lt;div class="col-xs-4"&gt; 
     &lt;div class="hp"&gt; 
      &lt;div class="hd icon_radar"&gt;
       降水预报
       &lt;a href="/web/channel-339.html" class="more"&gt;更多&lt;/a&gt;
      &lt;/div&gt; 
      &lt;div class="wrap"&gt; 
       &lt;a href="/web/channel-339.html" class="product"&gt;&lt;img src="/file/2024/04/10/SEVP_NMC_STFC_SFER_ER24_ACHN_L88_P9_20240410130002400.jpg?v=1712742390771" style="height:322px; padding:3px;"&gt;&lt;/a&gt; 
      &lt;/div&gt; 
     &lt;/div&gt; 
    &lt;/div&gt; 
    &lt;div class="col-xs-4"&gt; 
     &lt;div class="hp"&gt; 
      &lt;div class="hd icon_tqgb"&gt;
       气象公报
       &lt;a href="/web/channel-380.html" class="more"&gt;更多&lt;/a&gt;
      &lt;/div&gt; 
      &lt;div class="hb" style="padding-bottom:8px; padding-top:8px;"&gt; 
       &lt;a href="/web/channel-423.html" class="report-item"&gt; 
        &lt;div class="report-title" style="height:34px; line-height:34px;"&gt;
         04月10日20时：交通气象预报
        &lt;/div&gt; 
        &lt;div class="row report-content" style="height:60px;"&gt; 
         &lt;div class="col-xs-3" style="padding-right:0;"&gt;
          &lt;img src="/file/2024/04/10/SEVP_NMC_TRFC_SFER_EME_ACHN_L88_P9_20240410120002400_01.jpg?v=1712744716870" style="width:100%; height:60px;"&gt;
         &lt;/div&gt; 
         &lt;div class="col-xs-9 data-desc"&gt;
          中国气象局与交通运输部2024年04月10日联合发布全国主要公路气象预报
         &lt;/div&gt; 
        &lt;/div&gt; &lt;/a&gt; 
       &lt;a href="/web/channel-3780.html" class="report-item"&gt; 
        &lt;div class="report-title" style="height:34px; line-height:34px;"&gt;
         04月10日18时：天气公报
        &lt;/div&gt; 
        &lt;div class="row report-content" style="height:60px;"&gt; 
         &lt;div class="col-xs-3" style="padding-right:0;"&gt;
          &lt;img src="/file/2024/04/10/SEVP_NMC_WEBU_SFER_EME_AGLB_LNO_P9_20240410180000000_base64_1.jpg?v=1712743971210" style="width:100%; height:60px;"&gt;
         &lt;/div&gt; 
         &lt;div class="col-xs-9 data-desc"&gt;
          南方地区将有较强降水过程 强冷空气将影响新疆内蒙古等地
         &lt;/div&gt; 
        &lt;/div&gt; &lt;/a&gt; 
       &lt;a href="/web/channel-380.html" class="report-item"&gt; 
        &lt;div class="report-title" style="height:34px; line-height:34px;"&gt;
         04月10日08时：每日天气提示
        &lt;/div&gt; 
        &lt;div class="row report-content" style="height:60px;"&gt; 
         &lt;div class="col-xs-3" style="padding-right:0;"&gt;
          &lt;img src="/file/2024/04/10/SEVP_NMC_CDWP_SFER_EME_ACHN_LNO_P9_20240410000000000_base64_1.jpg?v=1712711071268" style="width:100%; height:60px;"&gt;
         &lt;/div&gt; 
         &lt;div class="col-xs-9 data-desc"&gt;
          南方地区降水和强对流天气即将返场 北方地区气温将有波动
         &lt;/div&gt; 
        &lt;/div&gt; &lt;/a&gt; 
      &lt;/div&gt; 
     &lt;/div&gt; 
    &lt;/div&gt; 
   &lt;/div&gt; 
  &lt;/div&gt; 
  &lt;div class="footer"&gt; 
   &lt;div class="container clearfix" style="padding: 20px 0;"&gt; 
    &lt;div class="f_left clearfix"&gt; 
     &lt;div class="dcs"&gt;
      &lt;a href="http://bszs.conac.cn/sitename?method=show&amp;amp;id=10C5A3062A721232E053022819AC4A2F" target="_blank"&gt;&lt;img src="/assets/ydyl/img/blue_error.png"&gt;&lt;/a&gt;
     &lt;/div&gt; 
     &lt;div class="content"&gt; 
      &lt;p&gt;中国气象报社 版权所有&lt;/p&gt; 
      &lt;p&gt;地址：北京市海淀区中关村南大街46号&lt;/p&gt; 
      &lt;p&gt;邮政编码：100081&lt;/p&gt; 
      &lt;p&gt;京ICP备05004897号 京公网安备11040102700146号&lt;/p&gt; 
     &lt;/div&gt; 
    &lt;/div&gt; 
    &lt;div class="f_right"&gt; 
     &lt;div class="footer-header"&gt;
      相关链接
     &lt;/div&gt; 
     &lt;ul class="links clearfix"&gt; 
      &lt;li&gt;&lt;a href="https://www.yidaiyilu.gov.cn" target="_blank"&gt;中国一带一路网&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a href="http://www.typhoon.org.cn" target="_blank"&gt;中国台风网&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a href="#" target="_blank"&gt;中国新闻网&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a href="http://www.people.com.cn" target="_blank"&gt;人民网&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a href="http://www.cma.gov.cn" target="_blank"&gt;中国气象网&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a href="https://public.wmo.int/zh-hans" target="_blank"&gt;世界气象组织&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a href="http://www.gov.cn" target="_blank"&gt;中国政府网&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a href="http://www.xinhuanet.com" target="_blank"&gt;新华网&lt;/a&gt;&lt;/li&gt; 
     &lt;/ul&gt; 
    &lt;/div&gt; 
   &lt;/div&gt; 
  &lt;/div&gt; 
  &lt;script src="/assets/lib/jquery.cookie.js" type="text/javascript"&gt;&lt;/script&gt; 
  &lt;script src="/assets/lib/mCustomScrollbar/jquery.mCustomScrollbar.min.js" type="text/javascript"&gt;&lt;/script&gt; 
  &lt;script src="/assets/lib/jquery.autocomplete.js" type="text/javascript"&gt;&lt;/script&gt; 
  &lt;script src="/assets/lib/bootstrap-hover-dropdown.min.js" type="text/javascript"&gt;&lt;/script&gt; 
  &lt;script src="/assets/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"&gt;&lt;/script&gt; 
  &lt;script src="/assets/lib/echarts.min.js" type="text/javascript"&gt;&lt;/script&gt; 
  &lt;script&gt;
	$(function(){
		$('.dropdown-toggle').dropdownHover();
		
		$("#searchInput").autocomplete('/api/autocomplete', {
			width: 345,
			max: 10,
			scroll: true,
			scrollHeight: 400,
			matchCase:true,
			parse:function(rows){
				var parsed = [];
				for (var i=0; i &lt; rows.data.length; i++) {
					var row = rows.data[i];
					if (row) {
						parsed[parsed.length] = {
							data: row,
							value: row.split('|')[0]
						};
					}
				}
				return parsed;
			},
			focusEvent:function(input, event){
				var v = $(input).val();
				if(v == ''){
					$('#selectCityDiv').show();
				} else {
					$('#selectCityDiv').hide();
				}
			},
			formatItem: function(row) {
				$('#selectCityDiv').hide();
				var arr = row.split('|');
				return '&lt;div class="row-fluid"&gt;&lt;div class="pull-left"&gt;' + arr[1] + '&lt;/div&gt;&lt;div class="pull-right"&gt;' + arr[3] + '&lt;/div&gt;&lt;/div&gt;';
			}
		}).result(function(event, row, formatted) {
			var arr = row.split('|');
			$("#searchInput").val(arr[1]);
			window.location.href = '/web/weather/' + arr[0] + '.html';
		});
		
		$(document).click(function(e){
			var obj = $(e.srcElement || e.target);
			var c = obj.attr('class') || null;
			var id = obj.attr('id') || null;
			console.log(c)
			console.log(id)
			if((c != null &amp;&amp; c.indexOf('tabflag') &gt; -1) || (id != null &amp;&amp; (id == 'selectCityDiv' || id == 'searchInput'))) {
				return true;
			} else {
				$('#selectCityDiv').hide();
			}
		});
	});
&lt;/script&gt; 
  &lt;script id="_trs_ta_js" src="//ta.trs.cn/c/js/ta.js?mpid=6252" async defer&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="/assets/lib/leaflet/leaflet.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="/assets/lib/Leaflet.LayerGroup.Collision.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="/assets/lib/rbush.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="/assets/cma/js/weatherForecastMap.js?v=20240410210900"&gt;&lt;/script&gt; 
  &lt;script&gt;
		$(function(){
			weatherForecastMap.initMap();
			var getWeek = function(date) {
				var week = ['周日', '周一','周二','周三','周四','周五','周六'];
				var date = new Date(parseInt(date.substr(0,4)), parseInt(date.substr(5,2)) - 1, parseInt(date.substr(8,2)));
				return week[date.getDay()];
			};
			var initReal = function(location, now, alarm, lastUpdate) {
				$(".city_name &gt; div:eq(0)").html('&lt;i class="iconfont icon-weizhi"&gt;&lt;/i&gt;' + location.name);
				$(".city_name &gt; div:eq(1)").html('&lt;i class="iconfont icon-time"&gt;&lt;/i&gt;' + lastUpdate.substr(11,5));
				$(".temperatrue").html( (now.temperature &gt;= 9999 ? '-' : now.temperature) + "&lt;sup&gt;℃&lt;/sup&gt;");
				$(".city_detail &gt; div:eq(0) &gt; div:eq(2)").html( (now.precipitation &gt;= 9999) ? '-' : (now.precipitation + 'mm') );
				$(".city_detail &gt; div:eq(1) &gt; div:eq(2)").html( (now.windScale &gt;= 9999 ? '-' : now.windScale) );
				$(".city_detail &gt; div:eq(1) &gt; div:eq(1)").html( (now.windDirection &gt;= 9999 ? '-' : now.windDirection) );
				$(".city_detail &gt; div:eq(2) &gt; div:eq(2)").html((now.humidity &gt;= 9999 ? '-' : now.humidity)+"%");
				$(".city_detail &gt; div:eq(3) &gt; div:eq(2)").html((now.pressure &gt;= 9999 ? '-' : now.pressure)+"hpa");
				
				if(alarm.length &gt; 0) {
					var alarmHtml = [];
					for(var i = 0; i &lt; alarm.length; i++){
						var _alarm = alarm[i];
						alarmHtml.push('&lt;a href="/web/alarm/' + _alarm.id + '.html" title="' + _alarm.title + '"&gt;&lt;img style="height:32px;" src="http://data.cma.cn/dataGis/static/ultra/img/gis/disasterWarning/' + _alarm.eventType + '_' + _alarm.severity + '.png"/&gt;&lt;/a&gt;');
						break;
					}
					$(".temperatrue").append('&lt;div class="alarm"&gt;' + alarmHtml.join('') + '&lt;/div&gt;');
				}
				$('#current-station').attr('href', '/web/weather/' + location.id + ".html");
			}
			var DAY = ['今天','明天','后天'];
			var initSevenDayWeather = function(dailyWeathers) {
				var day7Html = [];
				var dailyHtmlAfterDays = [];
				var itemWidth = (100 / dailyWeathers.length) + '%';
				for (var i=0; i&lt;dailyWeathers.length; i++) {
					var date = getWeek(dailyWeathers[i].date);
					if(i &lt; 3) {
						date = DAY[i];
					}
					day7Html.push("&lt;div class='day-item " + (i == 0 ? 'today' : '') + "' style='width:" + itemWidth + "'&gt;");
					day7Html.push("	&lt;div class='day-date'&gt;" +date+ "&lt;br/&gt;" + dailyWeathers[i].date.substr(5) + "&lt;/div&gt;");
					day7Html.push("	&lt;div class='day-icon'&gt;&lt;img src='/static/img/w/icon/w"+dailyWeathers[i].dayCode+".png'&gt;&lt;/div&gt;");
					day7Html.push("	&lt;div class='day-icon'&gt;&lt;img src='/static/img/w/icon/w"+dailyWeathers[i].nightCode+".png'&gt;&lt;/div&gt;");
					day7Html.push("	&lt;div class=''&gt;"+dailyWeathers[i].high+"℃/"+dailyWeathers[i].low+"℃&lt;/div&gt;");
					day7Html.push("	&lt;div class=''&gt;" + ( (dailyWeathers[i].dayText == dailyWeathers[i].nightText) ? (dailyWeathers[i].dayText) : (dailyWeathers[i].dayText + '转' + dailyWeathers[i].nightText) ) +"&lt;/div&gt;");
					day7Html.push("	&lt;div class=''&gt;" + dailyWeathers[i].dayWindScale + "&lt;/div&gt;");
					day7Html.push("&lt;/div&gt;");
				}
				$('#day7Div').html(day7Html.join(""));
			};
			
			function initWeatherView(stationid){
			    $.getJSON('/api/weather/view',{stationid:stationid},function(res){
			    	initReal(res.data.location, res.data.now, res.data.alarm, res.data.lastUpdate);
		            initSevenDayWeather(res.data.daily);
		        });
			}
			
			initWeatherView('');
		});
	&lt;/script&gt;  
  &lt;input type="hidden" name="页面生成时间" value="2024-04-10 21:09:00"&gt;
 &lt;/body&gt;
&lt;/html&gt;



主站首页
领导主站
部门概况
新闻资讯
信息公开
服务办事
天气预报














国内
国外





上海


乌鲁木齐


兰州


北京


南京


南昌


合肥


呼和浩特


哈尔滨


太原


广州


成都


拉萨


昆明


杭州


武汉


沈阳


济南


海口


深圳


石家庄


福州


西宁


西安


贵阳


郑州


重庆


银川


长春


长沙


天津


香港


澳门


台北


南宁






喀土穆


伦敦


开普敦


达喀尔


弗里敦


亚穆苏克罗


摩加迪沙


雅温得


朱巴


维多利亚


科纳克里


阿克拉


卢萨卡


马普托


利伯维尔


温得和克


努瓦克肖特


罗安达


吉布提市


亚的斯亚贝巴


内罗毕


阿布贾


恩贾梅纳


布拉柴维尔


哈拉雷


阿尔及尔


多多马


达累斯萨拉姆


布琼布拉


普拉亚


坎帕拉


班珠尔


洛美


基加利


拉巴特


塔那那利佛


突尼斯市


的黎波里


的黎波里


开罗


马拉博


蒙罗维亚


巴马科


首尔


乌兰巴托


新加坡市


帝力


吉隆坡


内比都


金边


河内


万象


斯里巴加湾市


伊斯兰堡


科伦坡


达卡


加德满都


马累


阿布扎比


科威特城


安卡拉


多哈


马斯喀特


贝鲁特


利雅得


麦纳麦


德黑兰


巴格达


喀布尔


巴库


第比利斯


埃里温


阿斯塔纳


比什凯克


杜尚别


塔什干


曼谷


雅加达


马尼拉


萨那


尼科西亚


莫斯科


维也纳


雅典


华沙


贝尔格莱德


布拉格


索非亚


布拉迪斯拉发


地拉那


萨格勒布


萨拉热窝


波德戈里察


塔林


维尔纽斯


卢布尔雅那


布达佩斯


斯科普里


布加勒斯特


里加


基辅


明斯克


基希讷乌


瓦莱塔


里斯本


卢森堡


惠灵顿


莫尔斯比港


阿皮亚


阿洛菲


苏瓦


帕利基尔


阿瓦鲁阿


努库阿洛法


维拉港


圣地亚哥


乔治敦


阿姆斯特丹


蒙得维的亚


加拉加斯


帕拉马里博


基多


利马


圣何塞


巴拿马城


圣萨尔瓦多


圣多明各


西班牙港


圣约翰


罗索


圣乔治


布里奇顿


哈瓦那


金斯敦


东京


华盛顿


哥本哈根


堪培拉


墨西哥城


大马士革


奥斯陆


安曼


尼亚美


巴西利亚


巴黎


布宜诺斯艾利斯


布鲁塞尔


平壤


廷布


拉巴斯


斯德哥尔摩


新德里


柏林


波多诺伏


渥太华


班吉


瓦加杜古


罗马


耶路撒冷


莫罗尼


赫尔辛基


路易港


金沙萨


阿什哈巴德


马德里










首页
天气实况
气象公报
气象预警
城市预报
天气资讯
气象专题
气象科普


















         降水
        

         -
        






         -
        

         -
        






         相对湿度
        

         -
        






         气压
        

         -
        





 






 






             全国24小时降水量预报
            

  
 






             FY-4B
            

  
 






             每日天气提示
            

  
 






             交通气象预报
            

  







 



 



 



 










       实况排行
      


今日高温
今日低温
昼夜温差
24小时降水





           排名
          

           城市
          

           省份
          

           最高温度
           


           1
          

           巧家
          

           云南
          

           37.1℃
           


           2
          

           元江
          

           云南
          

           37℃
           


           3
          

           元谋
          

           云南
          

           36.8℃
           


           4
          

           东川
          

           云南
          

           36.4℃
           


           5
          

           元阳
          

           云南
          

           35.9℃
           


           6
          

           双江
          

           云南
          

           35.7℃
           


           7
          

           宁南
          

           四川
          

           35.7℃
           


           8
          

           孟连
          

           云南
          

           35.3℃
           


           9
          

           澜沧
          

           云南
          

           35.1℃
           


           10
          

           云县
          

           云南
          

           34.9℃
           

          根据今日00时至21时整点实况资料统计
         




           排名
          

           城市
          

           省份
          

           最低温度
           


           1
          

           双湖
          

           西藏
          

           -18℃
           


           2
          

           改则
          

           西藏
          

           -15℃
           


           3
          

           革吉
          

           西藏
          

           -13.9℃
           


           4
          

           仲巴
          

           西藏
          

           -13.8℃
           


           5
          

           措勤
          

           西藏
          

           -11.5℃
           


           6
          

           珠峰大本营
          

           西藏
          

           -10.5℃
           


           7
          

           安多
          

           西藏
          

           -10.1℃
           


           8
          

           尼玛
          

           西藏
          

           -10.1℃
           


           9
          

           定日
          

           西藏
          

           -9.3℃
           


           10
          

           狮泉河
          

           西藏
          

           -9.3℃
           

          根据今日00时至20时整点实况资料统计
         




           排名
          

           城市
          

           省份
          

           温差
           


           1
          

           新林
          

           黑龙江
          

           25.9℃
           


           2
          

           塔中
          

           新疆
          

           25.1℃
           


           3
          

           图里河
          

           内蒙古
          

           24.5℃
           


           4
          

           博克图
          

           内蒙古
          

           24.1℃
           


           5
          

           墨玉
          

           新疆
          

           24℃
           


           6
          

           嘉荫
          

           黑龙江
          

           23.6℃
           


           7
          

           呼玛
          

           黑龙江
          

           23.5℃
           


           8
          

           塔河
          

           黑龙江
          

           23.5℃
           


           9
          

           乌伊岭
          

           黑龙江
          

           23.2℃
           


           10
          

           呼中
          

           黑龙江
          

           23.1℃
           

          根据今日00时至00时整点实况资料统计
         




           排名
          

           城市
          

           省份
          

           降水量
           


           1
          

           蒲江
          

           四川
          

           15.4mm
           


           2
          

           纳溪
          

           四川
          

           13.3mm
           


           3
          

           墨脱
          

           西藏
          

           13.3mm
           


           4
          

           西乡
          

           陕西
          

           13.2mm
           


           5
          

           特克斯
          

           新疆
          

           13.2mm
           


           6
          

           阜康
          

           新疆
          

           13mm
           


           7
          

           新源
          

           新疆
          

           12.9mm
           


           8
          

           旺苍
          

           四川
          

           12.4mm
           


           9
          

           小渠子
          

           新疆
          

           11.6mm
           


           10
          

           泸县
          

           四川
          

           10.9mm
           

          根据2024年04月10日20时实况资料统计
         











       气象专题
       更多



 

          强化风险管理 完善递进服务 落实叫应联动 全力以赴做好汛期气象服务
          


 

          二十四节气融媒体专题丨清明：气清景明 万物皆显
          


 

          专题丨你好，世界气象日
          


 

          专题丨2024年世界气象日
          









       天气预报
       更多





 全国  




 全国




 北京




 天津




 河北




 山西




 内蒙古




 辽宁




 吉林




 黑龙江




 上海




 江苏




 浙江




 安徽




 福建




 江西




 山东




 河南




 湖北




 湖南




 广东




 广西




 海南




 重庆




 四川




 贵州




 云南




 西藏




 陕西




 甘肃




 青海




 宁夏




 新疆




 香港




 澳门




 台湾













       气象预警
       更多





  黑龙江省发布森林（草原）火险黄色预警 




  山东省发布其它气象灾害黄色预警 




  吉林省发布森林火险黄色预警 




  河北省保定市发布雷电黄色预警 




  新疆维吾尔自治区阿勒泰地区发布大风黄色预警 




  广西壮族自治区南宁市发布大雾黄色预警 




  辽宁省本溪市发布大风蓝色预警 




  黑龙江省发布森林（草原）火险黄色预警 







       天气资讯
       更多


南方地区将有较强降水过程 黄淮东海等沿岸海域有大雾
青藏高原东部有持续雨雪 10日夜间起南方地区将有较强降水过程
青藏高原东部有持续雨雪 冷空气影响华北东北地区
广东中东部福建有强降雨 青藏高原东部有持续雨雪
江南南部华南中东部有强降雨强对流 注意防范暴雨引发的次生灾害
江南南部华南中北部有强降雨强对流
江南南部和华南中北部有强对流和强降雨天气
江南华南等地多强对流强降水








       卫星云图
       更多









       降水预报
       更多









       气象公报
       更多




         04月10日20时：交通气象预报
        





          中国气象局与交通运输部2024年04月10日联合发布全国主要公路气象预报
         
 


         04月10日18时：天气公报
        





          南方地区将有较强降水过程 强冷空气将影响新疆内蒙古等地
         
 


         04月10日08时：每日天气提示
        





          南方地区降水和强对流天气即将返场 北方地区气温将有波动
         
 











中国气象报社 版权所有
地址：北京市海淀区中关村南大街46号
邮政编码：100081
京ICP备05004897号 京公网安备11040102700146号




      相关链接
     

中国一带一路网
中国台风网
中国新闻网
人民网
中国气象网
世界气象组织
中国政府网
新华网



</pre>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
